选择器那些事

失踪人口冒个泡

优先级

入门学习的时候一定就听说过这些概念，在菜鸟教程之类的网站上也肯定学习过，比如类的优先级为 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 则是区分的。