CSS Adjoining Classes

Question

所以我对编码相当陌生，我为自己设置了一个任务，即使用 HTML、CSS 和 javaScript 从头开始重新创建我的 WordPress 网站，现在当我在网上寻找资源以寻找正在进行的关于制作响应式导航栏的最佳方法时，当然，我在 W3Schools 上遇到了一个例子。

现在我的问题是，进行相邻类的最佳方法是什么，我的 CSSLint 将其视为不好的做法(至少这是我从中学到的(，所以我遇到了一个难题是坚持使用它们并使其与 IE 6 不兼容(我相信(还是只是学习使用更好的标准。

@media screen and (max-width: 600px) {
.cMainNav.responsive {
position: relative;
}
.cMainNav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.cMainNav.responsive a {
float: none;
display: block;
text-align: left;
}
}

Answer 1

我想你误解了。相邻的类不是标准。这只是css特异性的众多部分之一。

如果元素包含两个类：

<div class="square red"></div>
<div class="square green"></div>

您可以像这样定位它们的组合：

.square.red {}

CSSLint 可能会警告您，制作像这样非常长、复杂的选择器并不理想。你永远不想以这样的事情结束：

.square.red.fixed.flex.button{}

如果您需要非常具体的定位，最好完全分配一个id或特定的class。

<div id="loginModal"></div>

通常，所有这些都只是您可以使用的工具。阅读有关特异性的更多信息，并记住这里实际上没有"错误"的选项，但这些选项中的任何一个都可能被滥用。