伪类选择器开头为冒号和用户交互有关的伪类,也叫用户行为伪类,或叫做动态伪类,比如:
,如a:hover{}
表示a元素鼠标悬浮时的状态(样式)
:link
、:active
、:visited
、:hover
。交互状态伪类描述(5):link匹配未曾访问的
a
链接 。注意遵循 LVHA 的先后顺序:link
>:visited
> :hover
> :active
:visited匹配已访问a
链接 (基于存在于浏览器本地的历史纪录),(visited/'v?z?t?d/ 访问 ):hover鼠标悬浮时:当用户悬浮到一个元素之上的时候匹配 。(/?h?v?(r)/ 盘旋、悬停):active鼠标按下时:在用户激活元素的时候匹配 , 一般被用在 <a>
和 <button>
元素:focusIE8得到焦点(光标):当一个元素有焦点的时候匹配,一般是输入表单 。注意顺序:先(表单)状态伪类描述(11):read-onlyIEreadonly:匹配用户不可更改的元素 , 具有 readonly 属性的a
样式,然后是他的LVHA
。实际项目中,<a>
的:link
、:visited
有时候会省略,合并到a
样式中 。
<input>
元素,也包括不能被用户编辑的元素:checkedIE9checked:匹配处于选中状态的radio(<input type="radio">
)、checkbox或 <select>
元素中的option:disabled IE9disabled:匹配被禁用的元素,如input
的disabled
。:enabledIE9启用状态:匹配处于开启状态的用户表单元素 。:requiredIE10required:匹配设置了required
必填的 表单元素,如设置了required属性的<input>
,<select>
, 或 <textarea>
元素 。效果同属性选择器input[required]
:optionalIE10required相反,没有设置必填(optional:/?ɑ?p??n(?)l/ ,可选的):in-rangeIEinput.value:代表一个 <input type="number">
元素,其当前值处于属性min 和max 限定的范围之内 。:out-of-rangeIEinput.value:与:in-range
相反 , 当值不在区间内的的时候匹配 。:invalidIE11匹配内容未通过验证的 <input>
或其他 <form>
元素:validIE10匹配内容验证正确的<input>
或其他 <form>
元素:indeterminate IE10表示状态不确定的表单元素,一般为复选框、单选框(一组都没有被选中) 。( /??nd??t??rm?n?t/不确定的)结构伪类/元素查找描述(13):first-childIE7匹配的元素&是其父元素的首个子元素,就是有2个条件,匹配冒号前的选择器+是其父元素的第一个子元素 。:last-childIE9匹配的元素&是其父元素的最后一个子元素,匹配的元素必须是其父元素的最后一个元素:first-of-typeIE9匹配的元素的第一个:匹配兄弟元素中第一个某种类型的元素,注意是兄弟元素的第一个:last-of-typeIE9匹配的元素的最后一个:匹配兄弟元素中最后一个某种类型的元素 。:only-childIE9匹配的元素的没有任何兄弟(也无子元素):没有任何兄弟(包括没匹配的),等效:first-child:last-child
:only-of-typeIE9匹配的元素的没有兄弟(无子元素):匹配兄弟元素中某类型仅有的元素,允许其他未匹配的兄弟元素 。:nth-child(2n+1)IE9匹配的元素的按序号选择:①所有兄弟元素按分组排序:首先找到所有兄弟元素(所有:包括其他未匹配的同级的兄弟元素),从1开始;②计算序号:参数为序号表达式(n=0/1/2...);③定位元素:只对匹配的元素生效● 参数**n**
:匹配序号1/2/3/4/5/6/7...自然数列;参数**3**
:匹配序号3元素 。(nth/enθ/ 第n个的 , 最近的)● 参数**2n+1**
:匹配序号1/3/5/7...奇数,=参数odd
;参数**2n**
:匹配序号2/4/6/8...偶数,=参数even
● 如果序号是没有匹配的兄弟元素,当然就不生效了!没有匹配的兄弟元素只参与排序:nth-of-type(2n+1)IE9匹配的元素的按序号选择:①匹配到的元素按分组排序;②计算序号:参数为序号表达式(n=0/1/2...);③定位元素:只对匹配的元素生效 。与:nth-child
不同点是排序元素只有匹配的 。:nth-last-childIE9匹配的元素的按倒序号选择:同:nth-child
,所有兄弟元素排序从后往前:nth-last-of-type IE9匹配的元素的按倒序号选择:同:nth-of-type
,匹配到的元素排序从后往前:emptyIE9匹配没有子元素的元素:包括文本、换行都算是子元素,除了空格、注释 。:targetIE9当前锚点的元素 , 匹配当前URL指向的
推荐阅读
- 常用CSS样式属性
- 现代 CSS 指南 -- at-rule 规则扫盲
- 五虎将纹身图 五虎上将纹身含义大全
- CSS基础知识筑基
- 简笔画如何画漫画羊(简笔画羊的画法大全简单)
- CSS 动画一站式指南
- 270个四个字名字 二手旧货店铺起名大全
- 为什么CSS中的calc函数可能会不生效?
- day03-CSS
- 2022支付宝小鸡今日答题答案大全