Question

假设我有一个名为.logo的选择器类并且html中的用法可能与此类似。

<div class="nav">
    <a class="logo"></a>
</div>

我看到其中很多都采用后代子格式设置如下

.nav .logo { 
   width: .. 
   height: .. 
}

如下所示，对单个选择器声明有什么好处？

.logo {
   width: ..
   height: ..
}

据我所知，html标记对于层次结构应用程序会更加整洁，并且它将有助于通过媒体查询调整实现可扩展性，但是通过这个特殊的徽标示例我看到很多以这种方式实现，我不太确定它的好处

加

我明白哪个更具针对性。我想我更多关于可重用性的意见。

Answer 1

.nav .logo比使用.logo

更具体

后者也将应用于文档中.logo的所有元素，其中.nav .logo将应用于具有.logo的元素，该元素嵌套在具有类{{1}的元素中}}

如果没有必要，你应该避免使用嵌套样式，因为它不仅影响性能，而且你最终会编写越来越多的特定规则来覆盖前一个。

在这种情况下，它可能会使用.nav，因为网站只有一个徽标，但同样，如果设计师正在设计一个客户端页面，每个网站上有一个类.logo，该怎么办？他的客户徽标目录列表？因此，在这种情况下，他会使用.logo作为他的网站徽标，并说他将其他.nav .logo包裹在一个元素中.logo，这样他就会使用.client_list。< / p>

Answer 2

后代的用法并不是一个好主意。那是因为你用特定的容器紧紧你的.logo类。如果您稍后将标记更改为：

会发生什么

<div class="nav">
</div>
<a class="logo"></a>

另一个好处是您可以在其他地方重复使用相同的样式。而不是为页脚编写另一个.logo类。我建议您多阅读OOCSS。

如果标题和页脚中有徽标，则最终可能会出现以下样式：

.logo {
   background: url('...') no-repeat;
}
.logo-header {
   background-size: 100px 50px;
}
.logo-footer {
   background-size: 70px 40px;
}

然后使用以下标记：

<header>
   <a class="logo logo-header"></a>
</header>
<footer>
   <a class="logo logo-footer"></a>
</footer>

通常，您在页眉和页脚之间共享一些样式，但两个地方仍然具有特定的CSS。我找到了更好的方法。

Answer 3

由于您可以使用class="logo"包含更多元素，因此这是一种仅定位.nav元素内的元素的方法。只剩下其他.logo。

当然，如果您只想特定地定位一个特定的a，您可能需要a id来使其唯一。

后代子CSS选择器

3 个答案: