CSS 优先级注意事项
1、优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
2、而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
3、当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
4、可以这样来看：选择器描述越具体越稀缺优先级越高，后面声明的比前面声明的选择器优先级高(同类型的选择器)。
选择器类型
对优先级没有影响的（可以理解为优先级非常低的）
通配选择符 (*)
关系选择符
- 相邻兄弟选择器
子选择器
~ 通用兄弟选择器
' ' 后代选择器
:not() 否定伪类
对优先级有影响的（下面的排序优先级依次变大）
元素选择器(h1 p div)
伪元素 (::before ::after)
类选择器 (.class1) 和 属性选择器 (a[title] img[title*=hello]) 两者优先级相同，声明在后面的会覆盖前面的
伪类选择器 (:hover)
ID 选择器 (#demo)
其他影响最终结果的
1、内联样式 style="xxx" <a style="color:red;"></a>
2、!important
一些要注意的情况
- 伪元素不可选中（ID、class 都无法超越它）
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
<head>
<style>
.box1::after {
content: "我是伪元素";
color: cyan;
}
#box {
color: red;
}
</style>
</head>
<body>
<div id="box" class="box1" name="lxfriday">
hello div
</div>
</body>
结果 我是伪元素 仍然不是红色，原因就是 #box 描述的是 div，而伪元素是无法用其他选择器选中的。这个伪元素的样式继承自 div。
2、类选择器和属性选择器它们的优先级是一样的，改变下面代码中的属性选择器 [name="lxfriday"] 和类选择器 .box1 的位置，颜色会发生变化。
<head>
<style>
.box1:hover {
color: cyan;
}
[name="lxfriday"] {
color: red;
}
.box1 {
color: pink;
}
</style>
</head>
<body>
<div id="box" class="box1" name="lxfriday">
hello div
</div>
</body>
综上，对最终效果的影响是：!important > 内联样式 style > ID 选择器 > 伪类选择器 > 属性选择器 = class 选择器 > 伪元素 > 元素(类型)选择器 > 关系选择器 > 通配符选择器 理解优先级应该从选择器对目标的描述准确程度，注意下面例子的效果：
!important
当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲，!important 与优先级无关，但它与最终的结果直接相关。使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
不要在内联样式中使用 !important，小心被喷。内联样式已经具有极高的优先级了，如果选择器中添加了 !important，可以考虑再定义一个更精确的选择器来覆盖 !important。
如果内联样式真的添加了 !important，则可以用 js 来消除（js 无法消除 class、ID 选择器的 !important）。
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
<body>
<div id="box" class="box1" style="color: red !important">
hello div
</div>
<script>
document.querySelector("#box").style.color = "blue";
</script>
</body>
下面是一些优化的经验：
- 一定要优化考虑使用样式规则的优先级来解决问题而不是
!important - 只有在需要覆盖全站或外部 CSS 的特定页面中使用
!important - 永远不要在你的插件中使用
!important，别人将很难更改样式 - 永远不要在全站范围的
CSS代码中使用!important
一些覆盖 !important 的办法：
- 只需再添加一条带
!important的CSS规则，再给这个给选择器更高的优先级（添加一个标签，ID或类）；或是添加一样选择器，把它的位置放在原有声明的后面（总之，最后定义一条规则比胜）;
table td { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }
- 或者使用相同的选择器，但是置于已有的样式之后;
td { height: 50px !important; }
td { height: 55px !important; } /* 应用这规则 */
- 或干脆改写原来的规则，以避免使用
!important。
CSS 优先级需要注意的几点
基于形式的优先级（Form-based specificity）
优先级是基于选择器的形式进行计算的。在下面的例子中，尽管选择器 *[id="foo"] 选择了一个ID，但是它还是作为一个属性选择器来计算自身的优先级。
<head>
<style>
*#foo {
color: green;
}
*[id="foo"] {
color: purple;
}
</style>
</head>
<body>
<div id="foo">
hello div
</div>
</body>
显示为绿色。虽然匹配了相同的元素，但是 ID 选择器拥有更高的优先级。所以第一条样式声明生效。
无视 DOM 树中的距离
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
<head>
<style>
body h1 {
color: green;
}
html h1 {
color: purple;
}
</style>
</head>
<body>
<h1 id="foo">
hello div
</h1>
</body>
显示为purple。
关于伪类和伪元素
伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。伪类使用 :xxx 的形式表示。常见伪类：
-
:link:visited:hover:active对<a>标签推荐使用这个顺序-
link: 链接平常的状态 -
visited: 链接被访问过之后 -
hover: 鼠标放到链接上的时候 -
active: 链接被按下的时候
-
-
:first-child:last-child:nth-child():nth-last-child():only-child :not():focus
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。伪元素推荐写法为::xx, 常见伪元素
-
::before::after ::first-line::first-letter::selection
网友评论