CSS中有多个点/句点

Question

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

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

我正在尝试修改Wordpress主题上的几个样式，并且如果我能弄清楚当前正在发生什么，它会有更多的成功。 谢谢

Answer 1

选择器只是意味着选择具有类a AS {WELL AS .button的任何.gold元素，以便您的锚标记看起来像

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

Demo

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

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

Demo

---

一般情况下，当你想将2个类的属性应用于单个元素时，上面的（不是选择器，但是为单个元素方法调用多个类）也是如此，例如你有.demo color: green;和.demo2 font-weight: bold;使用

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

将使它变得绿色和大胆。 Demo 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

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

例如，如果您有标签

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

和另一个标签

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

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