Несколько точек/периодов в CSS

Question

Может ли один из вас экспертов CSS объяснить этот указатель (если это даже то, что вы бы назвали его) мне? Я понимаю содержание, просто не a.button.gold. Две точки?

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

Я пытаюсь изменить пару стилей на Wordpress темы и будет иметь гораздо больше успеха с ним, если бы я мог понять, что происходит в настоящее время. Благодаря

Answer 1

Селектор просто означает выбрать любой a элемент, имеющий класс .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

Это означает, что фоновый цвет, указанный будет применяться к все теги <a>, чей атрибут «class» имеет значение «кнопка» или «золото».

Например, если у вас есть тег

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

и другой тег

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

затем, цвет фона для обоих классов будет такой же указан один.