CSS 是最强大的网页设计工具之一。 使用它我们可以在几分钟内更改网站的界面，而无需更改页面的标签。
在深入研究 CSS 选择器之前css选择器偶数，我们应该首先了解 CSS 优先级是如何工作的。
例如，在ap标签中添加一个类，但该类中的某些属性执行后不起作用。
通过Firebug查看css选择器偶数，发现不起作用的属性被覆盖了。 这时候就涉及到CSS选择器优先级的问题了。
我们在写CSS的时候需要注意的是，在级联中有些选择器会低于其他选择器，而且我们写在最上面的选择器不一定会覆盖我们在同一个元素上面写的样式。
那么如何估计特定选择器的优先级呢？ 如果您认为将优先级表示为用冒号分隔的四个数字，则相当简单，例如：1, 1, 1, 1 或 0, 2, 0, 1
第一个数字 (a) 通常为 0，除非标签上使用了 style 属性；
第二个数字 (b) 是该选择器上 id 数量的总和；
第三个数字 (c) 是该选择器上使用的其他属性选择器和伪类的总和。 这包括类（.example）和属性选择器（例如 li[id=red]）；
第四个数字（d）计数元素（如table、p、div等）和伪元素（如：第一行等）；
通用选择器（*）优先级为0；
如果两个选择器具有相同的优先级，则样式表中第一个选择器生效。
我们看几个例子，可能更容易理解：
#侧边栏 h2 — 0, 1, 0, 1
h2.标题 — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:第一行 — 0, 1, 0, 2
在以下情况下，第一个将起作用，因为它优先于第二个：
#sidebar p#first { 颜色：红色； } — 0, 2, 0, 1
#sidebar p:first-line { 颜色: 蓝色; } — 0, 1, 0, 2
至少对优先级如何工作的基本了解很重要，但是像 Firebug 这样的一些工具，当我们检查给定元素时，会按选择器优先级列出所有 CSS 选择器对，让我们知道在给定元素上使用哪一个。 激活选择器非常有用，可以非常轻松地查看哪个选择器应用于元素。
CSS3选择器的分类
CSS3选择器的分类如下图所示：
选择器语法
1. 基本选择句型
选择器
类型
功能说明
通配符选择器
选择文档中的所有 HTML 元素
元素选择器
选择指定类型的 HTML 元素
＃ID
ID选择器
选择具有指定 ID 属性值“id”的任意类型元素
。班级
类选择器
选择具有指定类属性值“class”的任何类型的任意数量的元素
选择器1，选择器N
组选择器
合并每个选择器匹配的元素集
2. 层次选择器句型
选择器
类型
功能说明
EF
后代选择器（包含选择器）
选择匹配的F元素，匹配的F元素包含在匹配的E元素中
E>F
子选择器
选择匹配的F元素，以及匹配的F元素所匹配的E元素的子元素
E+F
相邻兄弟选择器
选择匹配的F元素，匹配的F元素位于匹配的E元素的紧前面
英~法
通用选择器
选择匹配的F元素以及匹配E元素之后的所有匹配的F元素
3.动态伪类选择器句型
选择器
类型
功能说明
E：链接
链接伪类选择器
选择匹配的E元素，匹配元素有定义的超链接且未被访问过。常用于链接描述点
E：访问过
链接伪类选择器
选择匹配的E元素，匹配元素被超链接且已被访问过。常用于链接描述点
E：活跃
用户行为选择器
选择匹配的E元素，并激活匹配的元素。常用于链接点和按钮
E：悬停
用户行为选择器
选择匹配的E元素，用户键盘悬停在元素E上。IE6及以下浏览器仅支持a:hover
E：焦点
用户行为选择器
选择匹配的E元素，匹配的元素获得焦点
4.目标伪类选择器
选择器
功能说明
E：目标
选择所有匹配E的元素，匹配的元素由相对URL指向
5.UI元素状态伪类选择器句型
选择器
类型
功能说明
E：已检查
选择状态伪类选择器
匹配选中的复选框或单选按钮表单元素
E：启用
启用状态伪类选择器
匹配所有启用的表单元素
E：禁用
不可用状态伪类选择器
匹配所有禁用的表单元素
6.结构伪类选择器使用句型
选择器
功能说明
E：第一个孩子
元素 E 是父元素的第一个子元素。相当于 E:nth-child(1)
E：最后一个孩子
元素 E 是父元素的最后一个子元素。相当于 E:nth-last-child(1)
E：根
选择匹配元素E所在文档的根元素。在HTML文档中，根元素仍然是html，此时此选择器匹配与html类型选择器相同的内容
EF:第n个孩子(n)
选择父元素E的第n个子元素F，其中n可以是整数(1,2,3)，关键字(偶数，奇数)，或者公式(2n+1)，初始值为n 是 1 而不是 0。
EF:第n个最后一个子节点(n)
选择父元素E的最后n个子元素F。这个选择器与E:nth-child(n)选择器的求值顺序正好相反，但使用方式是一样的，其中：nth-last- child(1) 总是匹配最后一个元素，相当于last-child
E:第n个类型(n)
选择父元素中指定类型的第 n 个 E 元素
E:第n个最后类型(n)
选择父元素中指定类型的最后 n 个 E 元素
E：第一类
选择父元素内第一个指定类型的E元素，相当于E:nth-of-type(1)
E：最后一个类型
选择父元素中最后一个指定类型的E元素，相当于E:nth-last-of-type(1)
E：独生子女
选择父元素只包含一个子元素，且子元素与E元素匹配
E：唯一类型
选择父元素只包含一个同类型的子元素，子元素匹配E元素
E：空
选择没有子元素且不包含任何文本节点的元素
注意：（1）、“ul>li:nth-child(3)”并不一定选择列表的ul元素中的第三个子元素li，只是列表ul中的第三个li元素在其他元素之前不存在元素，命题有意义，否则列表中第三个li元素的样式不会改变。
(2)、:nth-child(n)中的参数只能是n，不能用其他字母代替。
(3)、:nth-child(odd) 选择偶数项，但使用 :nth-last-child(odd) 选择偶数项。
7. 否定伪类选择器
选择器
功能说明
E：不(F)
匹配除元素 F 之外的所有 E 元素
8.属性选择器句型
选择器功能说明
[属性]
用于选择具有指定属性的元素。
[属性=值]
用于选择具有指定属性和值的元素。
[属性~=值]
用于选择其属性值中包含指定词汇表的元素。
[属性|=值]
用于选择属性值以指定值开头的元素，该值必须是整个短语。
[属性^=值]
匹配属性值以指定值开头的每个元素。
[属性$=值]
匹配属性值以指定值结尾的每个元素。
[属性*=值]
匹配属性值包含指定值的每个元素。
注意：示例中，a[class="links"]{...}表示找不到匹配元素，只有a[class="links item"]{...}可以匹配。
发表评论