CSS中有多个点/句点

Question

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

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

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

Answer 1

选择器只是意味着选择a具有.buttonAS WELL AS 类的任何元素,.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

选择器`a [class ="button gold"]`不等同于`a.button.gold`.后者匹配例如"<a class="gold button"> ...... </a>"和"<a class="button gold foo"> ...... </a>,前者没有. (3认同)
更准确地使用属性选择器将是'a [class~ ="button"] [class~ ="gold"]`.您的编辑不会解决`<a class="gold button">`. (3认同)