html - 这样使用 CSS 有错吗？

Question

最近我使用了一种 CSS 结构，它使 HTML 更加清晰，但我不知道这是否有问题。

而不是使用:

.top { //properties }

.top-wrapper { //properties }

.top-logo { //properties }

对于 HTML:

<div class="top">
    <div class="top-wrapper">
        <a href="" class="top-logo">Logo</a>
    </div>
</div>

我实际上是这样编码的:

.top { //properties }

.top .wrapper { //properties }

.top .wrapper .logo { //properties }

对于 HTML:

<div class="top">
    <div class="wrapper">
        <a href="" class="logo">Logo</a>
    </div>
</div>

这样做有错吗？

Answer 1

这没有错，但是您拥有的选择器越多，您的样式的特异性就越高。有关特异性的更多信息，请参阅 http://www.w3.org/TR/CSS21/cascade.html#specificity .

想象一下你的例子

.top .wrapper .logo { font-size: 10px; }

接着是:

.logo { font-size: 20px; }

<a class="logo">将具有 10px 的字体大小，即使您在第二个声明中将其指定为 20px。