精准打击
我写的样式没有生效，怎么办？ 说点重要的事怎么样！ 总之我着急，先上线，有五个属性需要改，都覆盖掉了，emmm，那就加上五个重要的吧。 换到最后一个项目，随处可见重要人物的身影，当你或其他人因此而郁闷时，它就躲在一旁邪恶地微笑：我喜欢你看不懂我，又杀不了我的样子！
只是哭
另一种情况是，我不知道如何选择需要样式化的元素，所以我不断地添加类名，试图想到各种名称，而且我必须看到名称并理解它们，并且它们必须是不同，所以品种也越来越不同。 随着类名越来越多，很多人维护的项目似乎也越来越大，甚至让人眼花缭乱。
无爱
接下来让我们看看选择器有什么有趣的地方。
优先概念分析
总共有五个级别：
内联样式：权重为(1,0,0,0) id选择器：权重为(0,1,0,0)。 类、伪类、属性选择器：权重为(0,0,1,0)。 标签、伪元素选择器：权重为(0,0,0,1)。 通用、子、相邻选择器：权重为 (0,0,0,0)。
还有三个特殊规则：!important、继承和默认代理样式。 其中 !important 权重是无限的。
它们之间的默认优先级顺序是：!important > 内联样式 > id 选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承 > 代理（浏览器）默认属性。
样式生效规则如下：
当两个选择器的权重不同时，权重优先。 当两个选择器的权重相同时css 取消样式，后定义的会先生效（即层叠样式表的特性，先定义的会覆盖上面定义的）。 !important 修改的属性将无条件生效。
这里还有几点需要注意：
所有权重中的0和1代表标志。 比如内联样式中的(1,0,0,0)表示一级标志位为1，并不表示内联样式的权重为1000。同样的id选择器(0,1, 0,0)表示第二个flag为1，并不表示内联权重为100。也就是说#container{color:red}有第二级权重。 只有相同权重级别下的选择器才能累积。 低权重级别的选择器永远不会超过高级别选择器。 例如，#abc 的优先级高于#ad，因为它们实际上具有二级权重，但#abc 比#ab 多了三级权重，而#a 的优先级始终高于 。 bc（可以有任意多个高于二级权重的选择器），由于权重比较的同时，是从高到低逐级比较，而#a选择器是二级，所以.bc没有二级权重，虽然有很多无用的五级权重。 即使 !important 选择器的权重是无穷大，与物理学中无穷大的比较不同，两个 !important 权重是可以比较的，两个同时具有 !important 属性的选择器也符合里面的比较规则，例如#a .b 中的!important 的优先级高于.b 中的!important。
权重逐级比较公式：（第一级权重*选择器数量，第二级权重*选择器数量，第三级权重*选择器数量，第四级权重*选择器数量，第五级权重* 选择器的数量）。
它将对标记的位进行一一比较，而不是简单的除法运算。
恩，那就对了
写了这么长的文字，实在找不到地方插入图片。 总感觉自己的思路要被打断了。 现在先休息一下，稍后再继续阅读。
选择器类型分辨率
假设您已经了解各种类型的选择器，哪些是类选择器，什么是内联样式，什么是标签选择器等。
接下来我们讨论几种组合选择器：（示例中使用类名或标签作为选择器，所以为了简单起见，对于.a1这样的选择器，在表达a1的元素时，直接使用a1来表示类名）
①*：首先介绍一下通用选择器。 *{} 选择器将覆盖所有元素的代理默认样式。 您还可以使用 div.container*{} 来指定类名为 container 的 div 元素的所有后代元素应用样式。
②.a1>.b1：表示该样式应用于a1的子元素b1。 只能是子元素，不包括子元素。
.a1 > .b1{
color: red;
}
- 1
-
2
选择子元素
③.b1+.b2：表示该样式应用于b1旁边的b2。
.b1 + .b2{
color: red;
}
- 1
- 2
- 3
选择以下选项
④.b1~.b2：表示该样式应用于b1旁边的b2。 别跟着。
.b1 ~ .b2{
color: red;
}
- 1
- 2
- 3
选择上一个
⑤li:first-child：表示该样式应用于li，但li必须是属于其父元素的第一个子元素。 li:last-child 与之类似，li 必须是属于其父元素的最后一个子元素，不再举例。
li:first-child{
color: red;
}
- 1
- 2
- 3
- 4
选择第一个子元素
⑥span:first-of-type：表示该样式应用于span，只要该span属于其父元素所有子元素中的第一个span，即span后面的兄弟元素没有其他跨度，然后应用样式。 span:last-of-type 与之类似，只不过该span的同级元素旁边没有其他span，会应用该样式，就不举例了。
span:first-of-type{
color: red;
}
1
2
3
4
选择第一个类型
（提示：first-child和first-of-type的区别在于，first-child必须是第一个子元素，而first-of-type是同类型的第一个，并且它们可以修改多个选择器，比如如 .ab:first-child。Last-child 和 last-of-type 相同。）
⑦.b:not(li)：表示该样式应用于除li之外的b。
.b:not(li) {
color: red;
}
li:not(.a) {
color: red;
}
- 1
- 2
3
4
“不”修饰语
⑧li:nth-child(order)：表示该样式应用于li，但li必须是属于其父元素的第order子元素。 li:nth-last-child(order) 与之类似，li必须是属于其父元素的order的最后一个子元素，不再举例。
li:nth-child(2) {
color: red;
}
- 1
- 2
- 3
- 4
您可以指定将样式应用到哪个元素
这里还有一个小方法，比如我想选择前五里，可以吗？ 其实你可以。 请看代码。
li:nth-child(-n + 5) {
color: red;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
选择前五个元素
这是因为不仅可以指定顺序，还可以指定一个迭代序列n（从0开始），ul有8个li子元素，所以n可以取0,1,2,3,4,5,6,7，所以-n+5可以取出5,4,3,2,1,0,-1,-2，丢弃正数，这样就选出了1,2,3,4,5，也就是前五个元素，注意只能写成-n+5，不能写成5-n。
同样，它也有几种表现形式：（因为html部分和前面一样，就不重复了）
/* 选择第五个li元素，以及后面的所有li */
li:nth-child(n + 5) {
color: red;
}
第五个及后续元素
n+a数字表示该数字及后面元素的应用风格，-n+a数字表示该数字及之前元素的应用风格。
/* 以2的倍数选择li元素 */
li:nth-child(2n) {
color: red;
}只选择2的倍数
注意这里只能写成2n，不能写成2*n或者n*2。
/* 以2的倍数加1选择li元素 */
/* n从0开始 */
li:nth-child(2n + 1) {
color: red;
}
2加1的倍数
⑨li:nth-of-type(order)：只找到li类型中符合条件的才使用样式，与nth-child相同，但增加了类型区分。 li:nth-last-of-type(order) 与之类似，li 必须是属于其父元素的 order 的最后一个子元素，不再举例。
/* 按照同类型查找，不会受div影响 */
li:nth-of-type(2n) {
color: red;
}
- 1
- 2
9
10
- 3
11
- 4
- 5
- 6
- 7
- 8
按类型查找
他们还可以指定一个迭代序列n，与之前相同，因此这里不再给出示例。
⑩.a:only-of-type：表示对a应用一个样式，但a的标签类型在其父元素中必须是唯一的。
/* 注意：type指的是标签名要唯一才会生效 */
.a:only-of-type {
color: red;
}
1
2
3
1
2
3
4
将样式应用于独特类型
哇！ 终于快结束了。 由于选择器太多，篇幅有限，无法一一列举。 对于其他的伪类、伪元素、属性选择器等，可以直接去官网查看。 都是基础内容。
好工作！
局部范围
在Vue中，因为组件化的概念，我们希望当前样式只能在当前文件中生效，而不影响全局样式css 取消样式，所以我们可以为style标签设置scoped属性。 这里有一个机制可以保证各个组件之间的样式是隔离的，不会互相影响，不仅是兄弟组件，还有母子组件。
好的
这样就很好了，给我们带来了方便，而且我们不用再被同名的问题所困扰，还有一种情况：当我们引用一个子组件的时候，想要改变它上面的样式，这正常情况这个时候选择器很难生效，我们很难选择子组件上面的元素。
这是因为每个组件都是一个独立的样式作用域，通过唯一的标识符来区分。 父组件中编写的样式会在选择器末尾手动添加这个唯一标识符，而子组件有自己的另一个唯一标识符，因此无法选择该元素。
如何才能做到这一点？
这时候我们就可以使用一个叫做深度选择器的函数来帮助我们解决这个问题。
用>>>来表示，也可以用/deep/或::v-deep，两者表示的意思相同，只是写法不同，只是名称不同而已。
.a >>> .b {
color: red;
}
经典案例
我们以下面的 html 片段为例。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
区间选择：我们可以指定一个区间来选择指定的元素。
/* 选择2到5之间的 */
li:nth-child(n + 2):nth-child(-n + 5) {
color: red;
}
区间选择1
/* 选择4以及之后的，但必须是2的倍数 */
li:nth-child(n + 4):nth-child(2n) {
color: red;
}
区间选择2
/* 选择3的倍数之外的 */
li:not(:nth-child(3n)) {
color: red;
}
伪类选择：我们可以用伪类做一些事情。
span {
cursor: pointer;
}
span + span {
display: none;
}
span:hover + span {
display: inline;
}
查看识别码
5201314
默认状态
键盘浮动
话题
多说几句，即使不是选择器的内容，也是与其相关的，主要有以下几个方面：
当我们改变元素样式时，尝试先预设选择器的样式，然后动态减少或移除对应的类名来达到效果，而不是直接设置样式。 应尽量避免使用id选择器，最好通过标签、类名、属性选择器来操作样式。 由于id选择器的重量很大，有时不方便覆盖它。 而且只能有一个id。 另一个是id选择器会给浏览器带来比类选择器更大的负担。 尽量少用!important，多通过上面介绍的权重规则设置对应的样式。 尽量少用通用选择器，即key-value*，这也会减轻浏览器的负担。
CSS 太棒了
一般来说
CSS选择器是我们实际开发工作中不可或缺的一部分，我们几乎无时无刻都要和它们打交道。 只有掌握了它们的用法和原理，我们在操作元素样式时才能得心应手。 明天的内容你学会了吗？ [比较]
谢谢阅读！
发表评论