（CSS3选择器归类整理）（附CSS优先级要点）

让我们看一些例子，这样可能会更容易理解： # h2 — 0 , 1, 0 , 1 h2.title — 0 , 0 , 1, 1 h2 + p — 0 , 0 , 0 , 2 # p 第一行— 0 , 1, 0 , 2 在以下示例中，第一行将起作用，因为它的优先级高于第二行： # p#first { color red; } — 0 , 2 , 0 , 1 # p 第一行 { 颜色蓝色; } — 0 , 1, 0 , 2 至少对优先级如何工作有一个基本的了解是很重要的，但是一些工具，比如我们在 元素中指定的工具，根据优先级列出所有 css 选择器是非常有用的选择器的属性让我们知道哪个选择器对指定元素有效，让您轻松查看该选择器对元素的效果。 CSS3选择器分类 CSS3选择器分类如下图所示： 选择器语法一、基本选择器语法 选择器类型 功能说明 通配符选择 * 选择文档中所有 HTML 元素 E 元素选择 选择指定类型的 HTML 元素 #idID 选择器选择任意指定 ID 属性值为“id”的元素类型。 选择指定类属性值为“class”的任意类型的任意多个元素。 class类选择器元素组选择1，每个选择器匹配元素集组合器2，分层选择器语法选择类型函数描述符EF后代选择器（包含选择器选择匹配F元素，匹配F元素包含在匹配E元素中） 元素内匹配的 F 元素，与匹配的 F 元素匹配的 E 元素的 E>F 子选择器子元素选择匹配的 F 元素，匹配的 F 元素位于匹配的 E 元素 E+ 的紧后面F 相邻同级选择器元素。 匹配F元素，所有匹配的E~F位于匹配E元素之后。 通用选择器的F元素3，动态伪类选择器语法选择器类型功能说明E链接链接伪类选择选择匹配的E元素，并且匹配元素被定义为超链接并且尚未被选择器访问。

常用于链接追踪点，E链接伪类型选择选择匹配的E元素，匹配元素用超链接定义并已被选择器访问。 常用于链接绘图点。 用户选择匹配的E元素，并且匹配的元素被激活。 常用于链接绘图点和 E 悬停在选择器按钮上。 用户选择匹配的E元素，用户鼠标停留在元素E上。IE6及以下浏览器仅支持悬停用户行为选择E焦点来选择匹配的E元素，匹配元素获取焦点选择器4，目标伪类选择器 选择器函数描述 E 选择匹配 E 的所有元素，且匹配元素由相关 URL 指向 5、UI 元素状态伪类选择器语法 选择器类型函数描述 E 被选择状态伪类选择器匹配选中的复选按钮或单选按钮表单元素 E 启用状态伪类 类选择器匹配所有启用的表单元素 E. 不可用状态伪类选择器匹配所有禁用的表单元素 6. 结构伪类选择器使用语法选择器功能描述 E fisrt-child 作为第一个父元素。 子元素的元素E。 相当于 E nth-child(1) E last-child 作为父元素的最后一个子元素的元素 E。

与 E nth-last-child(1) 相同。 E root 选择匹配元素E所在文档的根元素。 在 HTML 文档中，根元素始终是 html。 此时选择器匹配的内容与html类型选择器相同：EF nth-选择父元素E的第n个子元素F。其中n可以是整数(1,2,3)，关键字child(n )（偶数，奇数），或者公式（2n+1），且n的起始值为1，而不是0。 EF nth-选择父元素E的下数第n个子元素F。这个选择器正好是与Enth-child(n)选择器计算顺序相反，但使用方法相同。 其中：nth-​​last-child(1)总是匹配最后一个child(n)1个元素，相当于last-child。 Enth-of- 选择父元素中指定类型的第 n 个 E 元素 type(n) E nth-last-of- 选择父元素中指定类型的倒数第二个 E 元素。 type(n) -选择父元素内指定类型的第一个E元素，相当于E nth-of-type(1) of-type Elast-选择父元素内指定类型的最后一个元素父元素E元素，相当于E nth-last-of-type(1) of-tye E only-选择父元素只包含一个子元素，子元素匹配E元素child E only-选择父元素只包含一个同类型的子元素，且子元素匹配E类型的E元素为空选择没有子元素的元素，且该元素不包含任何文本节点注：(1)、“ul >linth-child(3 )”并不表示对列表的ul元素中的第三子元素li的确定选择。 仅当列表 ul 中的第三个 li 元素之前没有其他元素时，该命题才有意义。 否则，列表的第三个元素将不会更改。 每个li元素的样式。

(2)、nth-child(n)中的参数只能是n，不能用其他字母代替。 (3)、nth-child(odd) 选择奇数项，但使用 nth-last-child(odd) 选择偶数项 7、负伪类选择器选择器函数说明 E not(F) 匹配所有 E 元素除元素F 8 外，属性选择器语法选择器功能描述[]用于选择具有指定属性的元素。 [=value] 用于选择具有指定属性和值的元素。 [~=value] 用于选择属性值包含指定词汇的元素。 用于选择属性值以指定值开头的元素，必须是整个单词[|=value]。 [^=value] 匹配属性值以指定值开头的每个元素。 [$=value] 匹配属性值以指定值结尾的每个元素。 [*=value] 匹配属性值包含指定值的每个元素。 注：示例中a[class="links"]{...}找不到匹配元素，只有a[class="links item"]{...}匹配( )最大的技术知识分享和学习平台在此 此内容由网站用户上传并发布。