CSS选择器大全48式( 二 ) _生活百科

<ul><li title="a">item1：a</li><li title="a b">item2：a b</li><li title="c a b">item2</li><li title="a-b" class="cli">item4：a-b</li><li title="abc" class="cli">item5：abc</li><li title="cab" class="cli">item6：cab</li><li title="cba" class="cli">item7：cba</li><li title="cbA1" class="cli">item8：cbA1</li></ul>

文章插图
02、伪类选择器（43）2.1、伪类选择器:伪类是选择器的一种，用于选择处于特定状态的元素。比如第一个元素、最后一个、奇数序列，或者是当鼠标指针悬浮时的状态。

伪类选择器开头为冒号 ：，如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得到焦点（光标）：当一个元素有焦点的时候匹配，一般是输入表单。

注意顺序：先a样式，然后是他的LVHA 。实际项目中，<a>的:link、:visited有时候会省略，合并到a样式中。

（表单）状态伪类描述（11）:read-onlyIEreadonly：匹配用户不可更改的元素，具有 readonly 属性的<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匹配的元素的没有任何兄弟（也无子元素）：没有任何兄弟（包括没匹配的），等效