选择器那些事
失踪人口冒个泡
优先级
入门学习的时候一定就听说过这些概念,在菜鸟教程之类的网站上也肯定学习过,比如类的优先级为 10、标签的优先级为 1,这些都是辅助我们记忆的,下面就来说一说容易出错的点。
.top {
margin: 10px;
}
[class] {
margin: 20px;
}
这里输出的margin
为多少?
答案是20px
,对于类和属性选择器以及伪类优先级是一致的,当然这个例子只是帮你温习的,再来看一个
/*第一条*/
body [class] {
color: #666;
}
/*第二条*/
html:not([dir]) {
color: red;
}
这里两条属性的优先级相等么?
答案是相等的,对于:not
这样的逻辑组合伪类影响优先级的是里面的元素,上面第一条是一个标签加上属性选择器优先级为 11,第二条 html 标签加上属性选择器优先级也是 11。
渲染顺序
上面举了一个例子最终颜色生效为red
,这是因为后来居上的原则,不过注意这个后来居上说的是整体文档而言。
<link rel="stylesheet" href="a.css" /> <link rel="stylesheet" href="b.css" />
a.css
body .foo {
color: red;
}
b.css
html .foo {
color: #666;
}
最终color
的值为#666
,同时还提醒一下 css 最终生效并不是看元素的距离的远近,而是根据优先级和位置,比如上面的 body 肯定比 html 离得近,但是因为后来居上所以并没有生效。
选择器是否能跨级?
在开头说了方便记忆我们会给类和标签之类的优先级添加上数字,但是如果你想用数量多就覆盖高一层级的是不可能的
.a {
color: red;
}
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a {
color: #666;
}
输出结果还是红色。
增加优先级
传统添加优先级我们可能会通过给标签添加 id 或者继续嵌套来实现,不过这样做肯定不合适因为后面在想修改可能就需要使用style
或者important
了,下面就说下两个小技巧
- 使用属性选择器
.a[class] {
color: red;
}
.a {
color: #666;
}
- 嵌套选择自己
.a.a {
color: red;
}
.a {
color: #666;
}
匹配顺序
说一点新手噩梦,css 的匹配顺序是从右往左,所以嵌套太多层的 css 语句就不要在写了,一般而言 id 选择器和类选择器的解析最快,标签选择器的速度很慢,所以在项目中不要嵌入太多的标签选择器有利于项目的优化。
是否区分大小写
说这个首先要说一下 html 是否区分大小写,html 对于标签和属性是不区分大小写的,而对属性值则是区分的,css 与 html 保持一致
<style>
p {
color: #666;
}
[CLASS] {
color: red;
}
.foo {
color: white;
}
</style>
<p class="FOO">hello wrold</p>
这里 p 的 color
为 red
,说明了标签和属性选择器不区分大小写,而对于 class 则是区分的。