html - CSS中的多个点/句点

Question

你们中的哪位 CSS 专家可以向我解释一下这个指示符（如果这就是你所说的）吗？我了解内容，只是不了解 a.button.gold。两个点？

a.button.gold{
background-color: #b9972f;
}

我正在尝试在 Wordpress 主题上修改几种样式，如果我能弄清楚当前正在发生的事情，它会取得更大的成功。谢谢

Answer 1

选择器只是意味着选择任何具有AS WELL ASa类的元素，因此您的锚标记应该看起来像.button.gold

<a href="#" class="button gold">Hello</a>

演示

选择器也可以写成element[attr~=val]@BoltClock 注释为

a[class~="button"][class~="gold"] {
   color: #f00;
}

演示

---

通常，当您想将 2 个类的属性应用于单个元素时，也会使用上述（不是选择器，而是为单个元素方法调用多个类），例如，例如您有.demo并且color: green;有.demo2这样font-weight: bold;使用

<p class="demo demo2">Hello, this will be green as well as bold</p>

将使其绿色和粗体。演示 2

Answer 2

这个选择器代表一个<a>具有两个类的元素，因为您可以在 CSS 中拥有任意数量的类（在类属性本身中用空格分隔）。HTML 看起来像：

<a href="#" class="button gold">Test</a>

如果<a>有三个类，您只需继续该模式：

<a href="#" class="button gold test">Test</a>

a.button.gold.test {
    color: peachpuff;
}

http://jsfiddle.net/NeqAg/

Answer 3

这意味着，指定的背景颜色将适用于<a>“class”属性值为“button”或“gold”的所有标签。

例如，如果您有一个标签

<a href="#" class="button">Button</a>

和另一个标签

<a href="#" class="gold">Gold</a>

然后，两个类的背景颜色将是相同的指定一个。