聊聊选择器的一些事

失踪人口冒个泡

优先级

入门学习的时候必定就据说过这些概念，在菜鸟教程之类的网站上也确定学习过，好比类的优先级为 十、标签的优先级为 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了，下面就说下两个小技巧

1. 使用属性选择器

.a[class] {
  color: red;
}
.a {
  color: #666;
}
复制代码

2. 嵌套选择本身

.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 则是区分的。