摘至
一、css3中的属性选择器
在CSS3中，追加了三个属性选择器分别为：[att*=val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。
（1）[att*=val] 属性选择器
[att*=val]属性选择器的含义是：如果元素用att表示的属性的属性值的包含字符为用val指定的字符的话，则该元素使用这个样式
（2）[att^=val] 属性选择器
[att^=val] 属性选择器的含义是：如果元素用att表示的属性的属性值的开头字符为用val指定的字符的话，则该元素使用这个样式
（3）[att^=val] 属性选择器
[att$=val] 属性选择器的含义是：如果元素用att表示的属性的属性值的结尾字符为用val指定的字符的话，则该元素使用这个样式
二、结构性伪类选择器
伪元素选择器是指并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，它的使用方法如下所示。
选择器：伪元素{属性：值}
伪元素选择器也可以与类配合使用，使用方法如下所示。
选择器.类名：伪元素{属性：值}
在CSS中，主要有如下四个伪元素选择器
（1）first-line 伪元素选择器：first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
（2）fiist-letter伪元素选择器：用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或日文等汉字）使用样式。
（3）before伪元素选择器：用于在某个元素之前插入一些内容
（4）after伪元素选择器：用于在某个元素之后插入一些内容
最基本的结构性伪类选择器—root选择器、not选择器、empty选择器与target选择器
（1）root选择器：root选择器将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的“<html>”部分。
（2）not选择器：如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。
（3）empty选择器：使用empty选择器来指定当元素中内容为空白时使用的样式。
（4）target选择器：使用target选择器来对页面中某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
first-child选择器、last-child选择器、nth-child选择器与nth-last-child选择器
（1）first-child：第一个列表项目使用样式。
（2）last-child：最后一个列表项目使用样式。
（3）nth-child(n)和nth-last-child(n)：某个指定序号的子元素来指定样式。nth-child(n)第n个元素、nth-last-child(n)倒数第n个元素。如果n为odd第奇数个子元素、n为even第偶数个子元素。对所有子元素进行计算。
nth-of-type和nth-last-of-type
CSS 3在计算子元素是第奇数个子元素还是第偶数个子元素时，就只针对同类型的子元素进行计算。
循环使用样式
only-child选择器
采用如下所示的方法并结合运用nth-child选择器与nth-last-child选择器，则可指定当某个父元素中只有一个子元素时才使用的样式。
<子元素>:nth-child(1)：nth-last-child(1){
//指定样式
}
可以使用only-child选择器来代替使用“nth-child(1)：nth-last-child(1)”的实现方法
三、UI元素状态伪类选择器
在CSS 3中，共有17种UI元素状态伪类选择器，分别是E:hover、E:active、E:focus、E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E: indeterminate、E::selection、E:invalid、E:valid、E:required、E:optional、E:in-range，以及out-of-range。
（1）E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式。
（2）E:active选择器被用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式。
（3）E:focus选择器被用来指定元素获得光标焦点时使用的样式，主要在文本框控件获得焦点并进行文字输入时使用。
（4）E:enabled伪类选择器用来指定当元素处于可用状态时的样式。
（5）E:disabled伪类选择器用来指定当元素处于不可用状态时的样式。
（6）E: read-only伪类选择器用来指定当元素处于只读状态时的样式。
（7）E: read-write伪类选择器用来指定当元素处于非只读状态时的样式。
（8）E:checked伪类选择器用来指定当表单中的radio单选框或checkbox复选框处于选取状态时的样式。
（9）E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框控件的样式。
（10）E:indeterminate伪类选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选取状态时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定。
（11）E::selection伪类选择器用来指定当元素处于选中状态时的样式。
（12）E:invalid伪类选择器用来指定，当元素内容不能通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式（例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式）时的样式。
（13）E:valid伪类选择器用来指定，当元素内容通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式（例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式）时的样式。
（14）E:required伪类选择器用来指定允许使用required属性，且已经指定了required属性的input元素、select元素以及textarea元素的样式。
（15）E:optional伪类选择器用来指定允许使用required属性，且未指定required属性的input元素、select元素以及textarea元素的样式。
（16）E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），且实际输入值在该范围内时使用的样式。
（17）E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），但实际输入值在该范围之外时使用的样式。
四、通用兄弟元素选择器
关于选择器部分，最后要介绍的一个选择器是通用兄弟元素选择器，它用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。它的使用方法如下所示。
<子元素> ~<子元素之后的同级兄弟元素> {
//指定样式
}
扫一扫
2046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
