请问写css样式的时候，是不是每次都要把完整的class写进去？

Question

比如：

<div class="one">
    <div class="two">
        <div class="three">
            <p class="qwq">hello world!</p>
        </div>
    </div>
</dv>

请问我要控制p ，是不是要用 .one .two .three来控制，还是直接控制 .qwq ？

Answer 1

这个看自己意愿，css的层级最好不要超过四层，层次太多会影响页面渲染的效率的

Answer 2

都可以 只是优先级不同。后代选择器优先级更高，也就是说.one .two .three .qwq 里面的样式 比.qwq 里面的样式优先级更高。

Answer 3

都可以，直接 .qwq 就可以选中你要的那个 <p>。
但如果在其他地方也有 p.qwq，却需要和这个 p 不同的样式，这时候就可以用 .three .qwq 或者 `.one
.qwq` 甚至更多层的选择器来进行更详细的区分。

Answer 4

写成.one .two .three .qwq的原因是什么?

一个是增加权级，也就是如果你之前已经写过.qwq的样式了，现在想用一个权级更大的选择器覆盖之前的样式

二是限制查找，比如页面中有很多class为qwq的元素，这么写可以限制你的样式仅作用在祖元素依次包含.three、.two、.one的.qwq元素

如果你的页面中只有一个.qwq元素，还不涉及权级问题的情况下，直接控制.qwq就可以了，因为选择器是从选择器的尾部(.qwq)依次向前过滤dom元素，如果嵌套太深，对页面渲染是一种负担