css - a.extra表示什么？

Question

我正在查看包含.myClass a.extra{...}和.myClass a.extra:hover{...}的css模板。“额外”是什么意思？

Answer 1

extra是一个类的名称。

因为你有：

.myClass a.extra{...}

该规则适用于具有a类的所有extra元素，这些元素是具有myClass类的元素的后代。

Answer 2

在您的示例中，a.extra表示类名为“extra”的锚标记。

<a href="http://example.com" class="extra"> Extra link! </a>

链式选择器意味着两者都属于同一个元素。因此，如果我想选择id为“foo”的div和“bar”类的div，我可以在CSS中定义规则，如下所示：

div#foo.bar {
  /* disco */
}

使用空格分隔（如在您的示例中）将定义子属性选择器：

<style type="text/css">
.myClass a.extra {
  /* disco */
}
</style>

<div class="myClass">
  <a href="#" class="extra"> disco </a>
</div>

查看更多属性选择器here。

Answer 3

这是锚的类。当css说a.extra之类的内容时，它会引用html中的<a>元素，如下所示：

<a class="extra">Contents</a>

这是一个更一般概念的示例：x.y指的是任何元素<x class="y">。

Answer 4

a.extra表示任何具有“额外”类的锚元素。

整行表示：

具有“extra”类的任何锚元素驻留在具有“myClass”类的任何元素下