CSS 相邻类

Question

所以我对编码相当陌生，我为自己设定了一个任务，那就是使用 HTML、CSS 和 javaScript 从头开始​​重新创建我的 WordPress 网站，现在我已经在网上为 寻找资源关于制作响应式导航栏的最佳方法，当然，我在 W3Schools 上看到了一个示例。

现在我的问题是什么是处理 Adjoining Classes 的最佳方式，我的 CSLint 将其视为不好的做法(至少这是我从中吸取的教训)所以我遇到了一个难题:坚持使用它们，只是让它与 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 specificity 的众多部分之一.

如果您有一个包含两个类的元素:

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

您可以像这样定位他们的组合:

.square.red {}

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

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

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

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

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