Оглавление
Предисловие:
В этой и следующих статьях мы сосредоточимся на общих селекторах в CSS.Внешний вид селекторов позволяет нам настраивать метки определенных элементов, поэтому мы должны освоить использование различных селекторов.
Введение в селектор:
В CSS (каскадных таблицах стилей) селектор — это шаблон или правило, используемое для выбора элементов HTML для применения определенного стиля к файлам . Селекторы определяют, к каким элементам применять стили, сопоставляя различные атрибуты, отношения или состояния элементов HTML.
Функция селектора CSS состоит в том, чтобы выбрать целевой элемент в соответствии с правилами сопоставления селектора и применить к нему указанный стиль. Селекторы могут выбирать элементы на основе имен тегов, имен классов, идентификаторов, атрибутов, состояний и т. д.
Различные селекторы:
1. Селектор элемента:
Селектор элементов (Element Selector) — самый простой и распространенный селектор в CSS. Он использует имя тега элемента HTML в качестве селектора для выбора всех элементов, соответствующих имени тега.
Синтаксис селекторов элементов очень прост, просто используйте имя тега в качестве селектора в CSS. Например, чтобы выбрать все элементы абзаца, используйте `p` в качестве селектора.
Вот несколько распространенных примеров селекторов элементов:
1. Селектор тегов: используйте имя тега HTML в качестве селектора, чтобы выбрать все элементы, соответствующие имени тега. Например, `p` выбирает все элементы абзаца, а `h1` выбирает все элементы заголовка первого уровня.
p {
background-color: yellow;
}2. Селектор подстановочных знаков: используйте `*` в качестве селектора для соответствия всем элементам. Например, `*` выбирает все элементы.
* {
background-color: yellow;
}3. Селектор типа. Используйте определенный тип элемента в качестве селектора для выбора элементов, соответствующих указанному типу. Например, `input` выбирает все элементы ввода, а `a` выбирает все элементы привязки.
input {
background-color: yellow;
}Селекторы элементов очень гибкие и могут использоваться для выбора одного или нескольких совпадающих элементов и применения к ним соответствующих стилей. Более конкретный и точный выбор может быть достигнут путем объединения селекторов элементов с другими селекторами.
Следует отметить, что селектор элементов выберет все совпадающие элементы, поэтому при его использовании обеспечьте точность селектора и риск неправильного использования.
2. Селектор класса:
Селектор классов (Class Selector) — это широко используемый селектор в CSS, который используется для выбора элементов с одинаковым именем класса. Он начинается с точки (.), за которой следует имя класса.
Синтаксис селектора класса следующий:
.classname {
/* CSS属性和值 */
}
Среди них точка (.) представляет селектор класса, за которым следует имя класса (которое может быть любым допустимым именем класса CSS). В HTML, когда значение атрибута класса элемента соответствует селектору класса, к элементу будет применяться стиль, определенный в селекторе класса.
Ниже приведен конкретный пример, предполагая, что у нас есть некоторые элементы HTML, использующие одно и то же имя класса `highlight`, мы можем установить для них стили с помощью селекторов классов:
.highlight {
background-color: yellow;
color: red;
}
Приведенный выше код выберет все элементы с классом `highlight` и установит для них желтый цвет фона и красный цвет текста.
Следует отметить, что селекторы классов можно использовать повторно, а элемент может иметь несколько имен классов. Это позволяет более гибко применять различные стили к элементам. Например:
<div class="highlight bold">这是一个示例文本</div>
Элемент `div` в приведенном выше коде имеет одновременно два имени класса: `highlight` и `bold`, которые могут быть стилизованы с помощью селекторов классов `.highlight` и `.bold` соответственно.
3. Селектор идентификатора
Селектор ID (ID Selector) — это широко используемый селектор в CSS, который используется для выбора определенных элементов по их уникальным идентификаторам. Он начинается со знака решетки (#), за которым следует имя идентификатора.
Синтаксис селектора ID следующий:
#idname {
/* CSS属性和值 */
}
Среди них знак решетки (#) указывает на селектор идентификатора, за которым следует имя идентификатора (которое может быть любым допустимым именем идентификатора CSS). В HTML, когда значение атрибута id элемента соответствует селектору ID, к элементу будет применяться стиль, определенный в селекторе ID.
Следует отметить, что идентификатор должен быть уникальным во всем HTML-документе, то есть у каждого элемента может быть только один идентификатор, и идентификатор не может начинаться с цифры. Поскольку идентификаторы уникальны, используйте селекторы идентификаторов для точного выбора определенных элементов на странице.
Вот конкретный пример, предполагающий, что у нас есть элемент `<div>` с уникальным идентификатором:
<div id="mydiv">这是一个示例文本</div>
Мы можем использовать селектор ID, чтобы стилизовать его:
#mydiv {
background-color: yellow;
color: red;
}
Приведенный выше код выберет элемент `<div>` с идентификатором `mydiv` и установит желтый цвет фона и красный цвет текста.
Следует отметить, что: Селектор ID имеет более высокий приоритет.Если вы используете и селектор класса, и селектор ID для выбора одного и того же элемента, стиль селектора ID переопределит стиль селектора класса. Поэтому селекторы идентификаторов следует использовать с осторожностью, чтобы обеспечить точное применение стилей.
4. Селектор перекрестка:
Селектор пересечения — это селектор в CSS, который используется для одновременного выбора элементов с несколькими именами классов. Он использует синтаксис селектора классов и объединяет несколько имен классов без каких-либо символов между ними.
Синтаксис селектора пересечения следующий:
.class1.class2 {
/* CSS属性和值 */
}
`.class1` и `.class2` представляют селекторы классов, и посредством этой комбинации выбираются элементы с именами классов `.class1` и `.class2`. Это позволяет применять стили к определенным элементам без изменения структуры HTML.
Вот конкретный пример, предполагающий, что у нас есть элемент `<div>` в HTML с именами классов `.highlight` и `.bold`:
<div class="highlight bold">这是一个示例文本</div>
Мы можем использовать селектор пересечения, чтобы стилизовать его:
.highlight.bold {
font-weight: bold;
color: red;
}
Приведенный выше код выберет элемент `<div>` с именами классов .highlight и .bold и установит его шрифт полужирным и красный цвет шрифта.
Следует отметить, что селектор пересечения требует, чтобы у элемента были имена классов, указанные во всех селекторах одновременно, и стиль будет применяться только тогда, когда два имени класса существуют одновременно. Если два имени класса относятся к разным элементам, они не будут совпадать. Такой подход помогает точнее выбирать элементы и применять к ним определенные стили.
5. Селектор союза:
Union Selector — это селектор в CSS, который используется для одновременного выбора нескольких элементов или для выбора элементов с несколькими именами классов или идентификаторами. Он использует запятую (,) для объединения нескольких селекторов или имен классов/идентификаторов вместе.
Синтаксис селектора объединения следующий:
selector1, selector2 {
/* CSS属性和值 */
}
`selector1` и `selector2` представляют селекторы, разделенные запятыми, чтобы объединить несколько селекторов. Это позволяет одновременно выбирать несколько элементов и применять к ним один и тот же стиль.
Вот несколько конкретных примеров:
1. Селектор объединения выбирает несколько элементов:
h1, h2, h3 {
color: blue;
font-weight: bold;
}
Приведенный выше код выберет все элементы `<h1>`, `<h2>` и `<h3>` на странице и установит их цвет шрифта на синий и полужирный.
2. Селектор объединения выбирает несколько имен классов:
.highlight, .bold {
background-color: yellow;
color: red;
}
Приведенный выше код выберет все элементы с классом `.highlight` и все элементы с классом `.bold` и установит их цвет фона на желтый, а цвет текста на красный.
3. Селектор объединения выбирает несколько идентификаторов:
#mydiv, #mysection {
border: 1px solid black;
padding: 10px;
}
Приведенный выше код выберет элементы с идентификатором `mydiv` и элементы с идентификатором `mysection` и установит для их границ сплошной черный цвет в 1 пиксель, а отступ — 10 пикселей.
Следует отметить, что селектор объединения может комбинировать различные типы селекторов, такие как селекторы меток, селекторы классов, селекторы идентификаторов и т. д., чтобы одновременно выбирать разные типы элементов и применять один и тот же стиль. Используйте селекторы объединения, чтобы уменьшить дублирование кода и применять одни и те же стили к нескольким элементам одновременно.
6. Селектор потомка:
Селектор потомков (Descendant Selector) — это селектор в CSS, который используется для выбора элементов-потомков элемента, то есть элементов-потомков внутри элемента. Он использует пробел () для объединения двух селекторов.
Синтаксис селекторов потомков следующий:
selector1 selector2 {
/* CSS属性和值 */
}
`selector1` и `selector2` представляют собой селекторы, соединяйте их пробелами. Селектор 1 выбирает родительский элемент (элемент-предок), а селектор 2 выбирает элемент-потомок (дочерний элемент). Это позволяет выбирать и применять стили на основе иерархических отношений элементов.
Ниже приведен конкретный пример, где у нас есть структура HTML:
<div class="container">
<h1>标题</h1>
<p>这是一个段落</p>
</div>
Мы можем использовать селекторы потомков для выбора и оформления элементов `<h1>` внутри элементов `<div>`:
.container h1 {
color: blue;
}
Приведенный выше код выберет элемент `<h1>` внутри элемента `<div>` с именем класса `.container` и установит для его текста синий цвет.
Обратите внимание, что селекторы потомков будут соответствовать всем подходящим элементам-потомкам, независимо от того, насколько они глубоки. selector2 может быть любым допустимым селектором CSS, это может быть селектор тегов, селектор класса, селектор ID и т. д.
Преимущество селектора потомков состоит в том, что он может очень гибко выбирать конкретного потомка элемента, не ограничиваясь иерархией. Правильно используя селекторы потомков, вы можете выбирать и применять стили именно к тем элементам, которые вам нужны.
7. Детский селектор:
Дочерний селектор (Child Selector) — это селектор в CSS, который используется для выбора прямых дочерних элементов (дочерних узлов) элемента, то есть прямых дочерних элементов под родительским элементом. Он использует знак «больше» (>) для объединения двух селекторов.
Синтаксис селектора потомков следующий:
selector1 > selector2 {
/* CSS属性和值 */
}
selector1 и selector2 представляют собой селекторы, соединенные знаком «больше». Селектор 1 выбирает родительский элемент, а селектор 2 выбирает непосредственные дочерние элементы родительского элемента. При этом выбираются и применяются стили к непосредственным дочерним элементам родительского элемента, без выбора внуков и последующих потомков.
Ниже приведен конкретный пример, где у нас есть структура HTML:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>Мы можем использовать селектор потомков, чтобы выбрать и стилизовать элемент `<li>` непосредственно под элементом `<ul>`:
ul > li {
color: red;
}
Приведенный выше код выберет элементы `<li>` непосредственно под элементом `<ul>` и установит для их текста красный цвет.
Следует отметить, что дочерний селектор выбирает только прямые дочерние элементы родительского элемента, не включая более глубокие дочерние элементы. selector2 может быть любым допустимым селектором CSS, это может быть селектор тегов, селектор класса, селектор ID и т. д.
Дочерний селектор очень полезен в некоторых специфических требованиях к макету, он может точно выбирать определенные дочерние элементы в иерархической структуре и применять к ним стили. В то же время использование селекторов потомков также может повысить производительность селекторов CSS, поскольку их область действия ограничена непосредственными дочерними элементами.
7. Селектор братьев и сестер:
Родственный селектор (Sibling Selector) — это селектор в CSS, который используется для выбора родственных элементов элемента, то есть других элементов, имеющих тот же родительский элемент, что и элемент. Он использует знак плюс (+) для объединения двух селекторов.
Синтаксис родственного селектора следующий:
selector1 + selector2 {
/* CSS属性和值 */
}
Среди них «селектор1» и «селектор2» представляют селекторы и соединены знаком «плюс». Селектор 1 выбирает элемент, а Селектор 2 выбирает следующий родственный элемент, который имеет того же родителя, что и Селектор 1. Это выбирает и применяет стили к родственным элементам.
Ниже приведен конкретный пример, где у нас есть структура HTML:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
Мы можем использовать родственный селектор, чтобы выбрать родственный элемент первого элемента `<li>` под элементом `<ul>` и установить стиль:
ul li:first-child + li {
color: blue;
}
Приведенный выше код выберет одноуровневые элементы первого элемента `<li>` под элементом `<ul>` (второй и третий элементы `<li>`) и установит для их текста синий цвет.
Следует отметить, что родственный селектор будет соответствовать только следующему родственному элементу в том же родительском элементе и не будет соответствовать другим родственным элементам. selector2 может быть любым допустимым селектором CSS, таким как селектор тегов, селектор классов, селектор идентификаторов и т. д.
Селекторы одноуровневого элемента очень полезны в некоторых конкретных требованиях к макету, вы можете выбрать следующий одноуровневый элемент определенного элемента и применить к нему стили. Используя одноуровневые селекторы, вы можете точно выбирать и применять стили к определенным одноуровневым элементам без использования дополнительных имен классов или идентификаторов.
8. Селектор атрибутов:
Селектор атрибутов (Attribute Selector) — это селектор в CSS для выбора элементов с указанными атрибутами. Селекторы атрибутов
Селекторы атрибутов имеют следующие три общие формы синтаксиса:
1. Селекторы атрибутов существования и значения:
- `[атрибут]`: выберите элементы с указанным атрибутом.
- `[attribute=value]`: выберите элементы, значение атрибута которых точно соответствует указанному значению.
2. Селектор атрибута частичного значения:
- `[attribute^=value]`: выберите элементы, значение атрибута которых начинается с указанного значения.
- `[attribute$=value]`: выберите элементы, значение атрибута которых заканчивается указанным значением.
- `[attribute*=value]`: выберите элементы, значение атрибута которых содержит указанное значение.
3. Точные и многозначные селекторы атрибутов:
- `[атрибут|=значение]`: выберите элементы, значение атрибута которых точно соответствует указанному значению или начинается с указанного значения и дефиса.
- `[атрибут~=значение]`: выберите элементы, значение атрибута которых содержит указанное значение в виде одного слова (через пробел).
- `[attribute*=value]`: выберите элементы, значение атрибута которых точно соответствует указанному значению или начинается с указанного значения и пробела.
Вот несколько конкретных примеров использования селекторов атрибутов:
/* 选择所有有href属性的元素 */
[href] {
color: blue;
}
/* 选择class属性值为"button"的元素 */
[class="button"] {
background-color: yellow;
}
/* 选择src属性值以".jpg"结尾的元素 */
[src$=".jpg"] {
border: 1px solid black;
}
/* 选择class属性值包含"active"的元素 */
[class*="active"] {
font-weight: bold;
}
Используя селекторы атрибутов, вы можете выбирать элементы в соответствии с их атрибутами и их значениями атрибутов, чтобы реализовать управление стилем элементов. Селекторы атрибутов обеспечивают гибкий способ выбора элементов, так что стили можно динамически изменять или применять при определенных условиях на основе атрибутов элемента.
Подведем итог:
В этой статье мы познакомим вас с некоторыми базовыми селекторами, но это не все селекторы. Из-за нехватки места ниже мы представим селекторы псевдоклассов. Надеюсь, эта статья может быть вам полезна.
Если мой материал был вам полезен, ставьте лайки, комментируйте и добавляйте в закладки . Творить нелегко, всеобщая поддержка — моя мотивация продолжать!
