文章详细介绍了CSS选择器的不同类型，包括派生选择器、ID选择器、类选择器和属性选择器等，并阐述了选择器的优先级原则。优先级基于选择器的特殊性计算，如ID选择器优先级高于类选择器。同时，文章通过例子解释了后代选择器、群组选择器的概念，并给出一个关于选择器优先级的实际应用例子，显示了在同一元素上应用多个类时，最后声明的样式会覆盖之前的样式。
派生选择器（用 HTML 标签申明）
id 选择器（用 DOM 的 ID 申明）
类选择器（用一个样式类名申明）
属性选择器（用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用，不知道就算了）
除了前 3 种基本选择器，还有一些扩展选择器，包括
后代选择器（利用空格间隔，比如 div
.a{
}）
群组选择器（利用逗号间隔，比如 p,div,#a{
}）
那么问题来了，CSS 选择器的优先级是怎么样定义的？
基本原则：一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越
高。
复杂的计算方法：
用 1 表示派生选择器的优先级
用 10 表示类选择器的优先级
用 100 标示 ID 选择器的优先级
div.test1 .span
var
优先级
1+10 +10 +1
span#xxx
.songs
li 优先级 1+100 +
10 +
1
#xxx
li 优先级
100 +1
那么问题来了，看下列代码，<p>标签内的文字是什么颜色的？
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在<p class=’
classB classA’>中的先后关系无关。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
