Question

我正在查看CSS CSS Menu Maker design，它使用了我以前从未见过的语法。

#cssmenu > ul > li.has-sub.active > a span {
  background: url(images/icon_minus.png) 98% center no-repeat;
}

li.has-sub.active部分 - 就是说'一个具有类的子有子和有效'吗？

在将'child of'的语法与'has this class'的语法结合起来之前，我还没有看到过一个实例。那是好习惯吗？

Answer 1

如果您的选择器包含多个.（类）指示符，则表示该元素必须包含所有列出的类

li.has-sub.active表示它会选择<li>元素，这些元素也必须包含＆＃34; has-sub＆＃34; 和＆＃34;有效＆＃34;。

至于＆＃34;这是好习惯吗？＆＃34;，在我看来是这样的。它所做的就是允许通过样式选择更具限制性。这可以节省时间，也是在JavaScript中为其他类型的dom选择提供钩子的好方法。

<强> MDN

CSS选择器
有关CSS选择器的更多信息，Mozilla开发人员网络在此处提供了非常好的信息：And here is a nice little demo。

CSS特异性
此外，不同的选择器具有不同的权重。这可能会导致某些选择器优先，并且正确规划这意味着采取＆＃34;特异性＆＃34;考虑到在你的例子中也在这里发挥作用。 MDN也有关于该主题的好文章：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors。

Answer 2

两个选择器在它们之间没有空格正在选择相同的元素。这是CSS的正常使用，根本不是坏习惯根据{{3}}：

您还可以组合选择器，制作更具体的选择器。

例如，选择器.key选择具有类名key的所有元素。选择器p.key仅选择具有类名称密钥的<p>元素。

您不限于两个特殊属性，类和ID。您可以使用方括号指定其他属性。例如，选择器[type='button']选择具有值属性的类型属性的所有元素。

例如：

div.classname{}

将选择<div class="classname"></div>

span#elementid.classname

将选择<span id="elementid" class="classname"></span>

.classname.classtwo

将选择<span class="classname classtwo"></span>

在CSS中，选择器：

#cssmenu > ul > li.has-sub.active > a span

会选择如下的HTML结构：

<div id="cssmenu">
  <ul>
    <li class="has-sub active"><a><span>I am selected</span></a></li>
  </ul>
</div>

MDN

Answer 3

这是正确的方法，因为您可能需要为单个元素添加多个类并继承不同的样式。您可以将多重继承视为一种疯狂的比较。

#cssmenu > ul > li.has-sub.active > a span {
}

然后选择：

#cssmenu                 - ID
  ul                     - directly inside the above element (because of >).
    li                   - directly inside the above element (because of >).
      .has-sub.active    - LI with both the classes.

这绝对是编写CSS的正确方法。因为，这将与Modular CSS对齐，您可以混合和匹配不同的CSS组件样式。

这个CSS语法是什么意思：'selector.stuff1.stuff2'？

3 个答案: