Подробное Объяснение Выборщиков по Классу CSS

Класс селектора позволяет определить стиль независимо от элементов документа.

Выборщики по классу в CSS

Класс селектора позволяет определить стиль независимо от элементов документа.

Этот селектор можно использовать отдельно или в сочетании с другими элементами.

Совет:Эти селекторы можно использовать только после надлежащего маркирования документа, поэтому обычно перед использованием этих селекторов нужно сделать некоторые планирования и构思.

Чтобы применить стиль, не учитывая конкретный элемент дизайна, наиболее часто используемый метод - это использование класса селектора.

Изменить HTML код

Прежде чем использовать класс селектора, необходимо изменить конкретные маркеры документа, чтобы класс селектора работал корректно.

Чтобы связать стиль класса селектора с элементом, необходимо определить класс как подходящее значение. См.下面的 HTML код:

<h1 class="important">
Этот заголовок очень важен.
</h1>
<p class="important">
Этот абзац очень важен.
</p>

В上面的 коде, класс обоих элементов определен как important: первый заголовок (элемент h1), второй абзац (элемент p).

Грамматика

Затем мы используем следующую грамматику для применения стилей к этим категориям элементов, то есть точка перед именем класса, а затем объединение с wildcard селектором:

*.important {color:red;}

Если вы хотите выбрать все элементы с одинаковыми именами классов, вы можете игнорировать wildcard селектор в классовом селекторе, это не имеет негативных последствий:

.important {color:red;}

Попробуйте Самостоятельно

Объединение с элементными селекторами

Классовые селекторы могут использоваться вместе с элементными селекторами.

Например, возможно, вы хотите, чтобы только абзацы отображались красным текстом:

p.important {color:red;}

Теперь селектор будет соответствовать всем элементам p с классом important, но не будет соответствовать другим типам элементов, независимо от наличия у них этого класса. Селектор p.important можно интерпретировать как: «Все элементы p с классом important». Поскольку элемент h1 не является абзацем, этот селектор не соответствует этому правилу, поэтому элемент h1 не становится красным текстом.

Если вы действительно хотите определить отличный стиль для элемента h1, вы можете использовать селектор h1.important:

p.important {color:red;}
h1.important {color:blue;}

Попробуйте Самостоятельно

Многоклассовые селекторы CSS

В предыдущем разделе мы рассмотрели случаи, когда в значении класса содержится один термин. В HTML значение класса может содержать список терминов, разделенных пробелами. Например, если нужно пометить определенный элемент как важный (important) и как предупреждение (warning), можно записать:

<p class="important warning">
This paragraph is a very important warning.
</p>

Порядок этих слов не имеет значения, можно написать warning important.

Мы предполагаем, что все элементы с классом important должны быть жирными, а все элементы с классом warning - курсивными, и у всех элементов, содержащих как important, так и warning, должен быть серебристый фон. Это можно записать следующим образом:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Попробуйте Самостоятельно

С помощью объединения двух классовых селекторов можно выбрать толькоВключает эти классыэлементов (не имеет значения порядок классов).

Если в многоклассовом выборщике содержится класс, который не содержится в списке классов, то совпадение будет失败. Вот правила:

.important.urgent {background:silver;}

Как ожидалось, этот выборщик будет соответствовать только элементам p, у которых атрибут class содержит слова important и urgent. Таким образом, если у элемента p атрибут class содержит только слова important и warning, он не будет соответствовать. Однако, он будет соответствовать следующим элементам:

<p class="important urgent warning">
Этот абзац содержит очень важное и срочное предупреждение.
</p>

Попробуйте Самостоятельно

Важное Уведомление:В версиях Internet Explorer до IE7 на различных платформах не может быть правильно обработан выборщик с несколькими классами.