css层级设置不好用

CSS层级设置不易上手，对于新手来说十分困难。

.box {
        background-color: red;
}
.box p {
        color: white;
}

在上面的代码中，想要给.box下的p标签设置字体颜色为白色，我们一般都会写成上面这样。

但是，在实际运用到代码中时，有时会出现我们设置的样式并没有生效的情况。这是因为我们在设置层级时没有考虑到权重的问题。

对于CSS选择器的权重而言，id选择器的权重最高，而标签选择器的权重最低，其中类选择器和属性选择器的权重相同。

那么，该如何解决上述问题呢？有两种方法：

.box p {
      color: white !important;
}

方法一：使用!important

在需要加上权重的CSS属性后面加上!important，可强制样式优先级最高。

.box .text {
      color: white;
}
    

方法二：使用类选择器

使用类选择器代替标签选择器或者在标签选择器前面加上类选择器，可提高权重，从而达到效果。

综上所述，CSS层级设置虽然有些难用，但如果掌握了其权重规则，还是可以方便地解决问题的。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！