Выборщики CSS

Селекторы CSS - это шаблоны для соответствия элементам в документе HTML. Связанные правила стиля будут применяться к элементам, соответствующим шаблону селектора.

Что такое селектор

Селекторы - это один из важнейших аспектов CSS, так как они используются для выбора элементов на веб-странице, чтобы можно было устанавливать стили. Вы можете определить селекторы несколькими способами.

Общий селектор

Общий селектор (используемый*Звездочка или звездочка (или звездочка) соответствует каждому отдельному элементу на странице. Если на целевом элементе есть другие условия, можно пропустить общие селекторы. Этот селектор обычно используется для удаления defaultных отступов и заполнения из элементов для быстрого тестирования.

*　{
　　　　margin:　0;
　　　　padding:　0;
　　}

*Правила стиля в селекторе будут применяться ко всем элементам в документе.

Выборщик типа элемента

Выборщик типа элемента будет соответствовать каждому примеру элемента в дереве документа соответствующему типу элемента.

p　{
　　　　color: blue;
　　}

pПравила стиля в селекторе будут применяться к<p>Каждый элемент документа, и установите его цвет в синий, независимо от его положения в дереве документа.

селектор ID

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

определение селектора ID - это символ номера (#),#следующие за ними значения идентификаторов.

#error {
　　　　color: red;}

стильные правила будутidтекст элементов, у которых установлено свойствоerror.

классовый селектор

классовый селектор можно использовать для выбора элементов сclassлюбой HTML элемент с этой классом будет форматироваться в соответствии с определенными правилами.

пунктом (.следующие за ними определяют классы по значениям классов.

.blue {
　　　　color: blue;
　　　　　　}

стильные правила будутclassтекст каждого элемента в документе, у которого установлено свойствоголубой. Вы можете сделать его более конкретным. Например:

p.blue {
　　　　color: blue;
　　　　}

стильные правила в селектореp.blueтолько<p>установленclassэлементы, у которых установлено свойствоголубойи не влияют на другие абзацы.

селекторы потомков

Когда необходимо выбрать элемент, который является потомком другого элемента, можно использовать эти селекторы. Например, если нужно локализовать только те маркеры, которые содержатся в unordered list, а не все маркеры элементов.

ul.menu li a {
　　　　text-decoration: none;
　　　　}
h1 em {
　　　　color: green;
　　　　}

стильные правила внутри селектораul.menu li aтолько для<a>включенные в класснеструктурированный списоквключая те, которые являются якорными элементами.menuи не влияют на другие ссылки в документе. Также,h1 emстильные правила внутри селектора применяются только к<em>элементы, содержащиеся в<h1>.

дочерний селектор

дочерний селектор можно использовать только для выбора элементов, которые являются прямыми детьми определенного элемента. Дочерний селектор состоит из двух или более селекторов, разделенных大于ом (например>разделены пробелом. Например, вы можете использовать эти селекторы для выбора элементов первого уровня в списке с несколькими уровнями вложенности.

ul > li {
　　　　list-style: square;
　　　　}
ul > li > ol {
　　　　list-style: none;
　　　　}

стильные правила внутри селектораul > liтолько для<li>в качестве<ul>элементы, которые являются прямыми детьми элемента, и не влияют на другие элементы списка.

соседний братский селектор

соседний выборщик уровня можно использовать для выбора элементов того же уровня. Грамматика этого селектора аналогична: E1 + E2, где E2 является целевым селектором.

h1 + pследующем примере селектора<p>только в<h1>и<p>элемент в дереве документа делится одним и тем же родителем и<h1>следующий за этим<p>Выбор элемента возможен только в случае, если элемент находится перед другим элементом. Это означает, что только каждый<h1>Только абзацы после заголовка имеют связанные правила стиля.}

h1 + p {
　　　　color: blue;
　　　　font-size: 18px;
　　　　}
ul.task + p {
　　　　color: #f0f;
　　　　text-indent: 30px;
　　　　}

Общий родственный селектор

Общий родственный селектор подобен相邻шему родственному селектору (E1 + E2), но не так строг. Общий родственный селектор состоит из двух простых селекторов, которые состоят из знака вопроса (〜）символы разделены. Это можно записать так: E1〜E2, где E2 является целью селектора.

В следующем примере селектораh1 ∼ pвыберет это<p>до<h1>Все элементы, у которых все элементы в древовидной структуре документа имеют одинакового родителя.

h1 ∼ p {
　　　　color: blue;
　　　　font-size: 18px;
　　　　}
ul.task ∼ p {
　　　　color: #f0f;
　　　　text-indent: 30px;
　　　　}

Есть еще больше селекторов, таких как селекторы свойств, pseudo-классы, pseudo-элементы. Мы будем обсуждать эти селекторы в следующих главах.

Группированные селекторы

Множественные селекторы в таблице стилей обычно делятся на одинаковые правила стиля. Вы можете объединить их в список, разделенный запятыми, чтобы максимально уменьшить код в таблице стилей. Это также предотвращает повторение одинаковых правил стиля.

h1 {
　　　　font-size: 36px;
　　　　font-weight: normal;
　　　}
h2 {
　　　　font-size: 28px;
　　　　font-weight: normal;
　　　}
h3 {
　　　　font-size: 22px;
　　　　font-weight: normal;
　　　}

Как вы можете видеть в примере выше, те же стили правилаfont-weight: normal;являются共享ыми с помощью выбораh1,h2иh3Таким образом, их можно разделить на список, разделенный запятыми, как показано ниже:

h1, h2, h3 {font-weight: normal;}
h1 {font-size: 36px;}
h2 {font-size: 28px;}
h3 {font-size: 22px;}