English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS выборщики используются для выбора шаблонов стилей элементов, которые вы хотите.
"CSS" столбец показывает атрибуты определения свойств в версиях CSS (CSS1, CSS2 или CSS3).
| Выборщик | Пример | Описание | Версия CSS |
|---|---|---|---|
| .class | .intro | Выберите все элементы с классом "intro" | 1 |
| #id | #firstname | Выберите все элементы с атрибутом id="firstname" | 1 |
| * | * | Выберите все элементы | 2 |
| element | p | Выберите все элементы <p> | 1 |
| element,element | div,p | Выберите все элементы div и p | 1 |
| element element | div p | Выберите все элементы <p> внутри элементов <div> | 1 |
| element>element | div>p | Выберите все элементы <p>, родительские элементы которых div | 2 |
| element+element | div+p | Выберите каждый элемент <p>, который следует сразу за элементом <div> | 2 |
| [attribute] | [target] | Выберите все элементы с атрибутом target | 2 |
| [attribute=value] | [target=-blank] | Выберите все элементы с атрибутом target="-blank" | 2 |
| [attribute~=value] | [title~=flower] | Выберите все элементы с атрибутом title, значение которого содержит слово "flower" | 2 |
| [attribute|=language] | [lang|=en] | Выберите все элементы с атрибутом lang, значение которого начинается на "en" | 2 |
| [attribute^=value] | a[src^="https"] | Выберите каждый элемент с атрибутом src, значение которого начинается на "https" | 3 |
| [attribute$=value] | a[src$=".pdf"] | Выберите каждый элемент с атрибутом src, значение которого заканчивается на ".pdf" | 3 |
| [attribute*=value] | a[src*="w3codebox"] | Выберите каждый элемент с атрибутом src, значение которого содержит подстроку "w3codebox" | 3 |
| :link | a:link | Выберите все непосещенные ссылки | 1 |
| :visited | a:visited | Выберите все посещенные ссылки | 1 |
| :active | a:active | Выберите активную ссылку | 1 |
| :hover | a:hover | Выберите ссылку, над которой находится мышь | 1 |
| :focus | input:focus | Выберите элемент ввода с фокусом | 2 |
| :first-letter | p:first-letter | Выберите каждую первую букву каждого элемента <p> | 1 |
| :first-line | p:first-line | Выберите каждую первую строку каждого элемента <p> | 1 |
| :first-child | p:first-child | Укажите стиль, который применяется только к элементу <p>, являющемуся первым ребенком родителя | 2 |
| :before | p:before | Вставьте содержимое перед каждым элементом <p> | 2 |
| :after | p:after | Вставьте содержимое после каждого элемента <p> | 2 |
| :lang(language) | p:lang(it) | Выберите все элементы <p> с начальным значением属性的 lang = "it" | 2 |
| element1~element2 | p~ul | Выберите каждый элемент p, который следует за каждым ul-элементом | 3 |
| :first-of-type | p:first-of-type | Выберите каждый элемент p, который является первым p-элементом родителя | 3 |
| :last-of-type | p:last-of-type | Выберите каждый элемент p, который является последним p-элементом родителя | 3 |
| :only-of-type | p:only-of-type | Выбор каждого элемента p, который является единственным элементом p своего родителя | 3 |
| :only-child | p:only-child | Выбор каждого элемента p, который является единственным подэлементом своего родителя | 3 |
| :nth-child(n) | p:nth-child(2) | Выбор каждого элемента p, который является вторым подэлементом своего родителя | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | Выбор каждого элемента p, который является вторым подэлементом своего родителя, считая от последнего подэлемента | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Выбор каждого элемента p, который является вторым элементом p своего родителя | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Выбор каждого элемента p, который является вторым элементом p своего родителя, считая от последнего подэлемента | 3 |
| :last-child | p:last-child | Выбор каждого элемента p, который является последним подэлементом своего родителя | 3 |
| :root | :root | Выбор корневого элемента документа | 3 |
| :empty | p:empty | Выбор каждого элемента p без подэлементов (включая текстовые узлы) | 3 |
| :target | #news:target | Выбор текущего активного элемента #news (включая URL, на который было нажато с помощью этого锚а) | 3 |
| :enabled | input:enabled | Выбор каждого включенного элемента ввода | 3 |
| :disabled | input:disabled | Выбор каждого отключенного элемента ввода | 3 |
| :checked | input:checked | Выбор каждого выбранного элемента ввода | 3 |
| :not(selector) | :not(p) | Выбор каждого элемента, который не является элементом p | 3 |
| ::selection | ::selection | Соответствие части элемента, выбранной пользователем или выделенной | 3 |
| :out-of-range | :out-of-range | Соответствие элементов ввода с значениями вне заданного интервала | 3 |
| :in-range | :in-range | Соответствие элементов ввода с значениями в заданном интервале | 3 |
| :read-write | :read-write | Используется для соответствия элементов, которые можно читать и写入 | 3 |
| :read-only | :read-only | Используется для соответствия элементов с установленным свойством "readonly" (только чтение) | 3 |
| :optional | :optional | Используется для соответствия элементов с опциональными значениями ввода | 3 |
| :required | :required | Используется для соответствия элементов с установленным свойством "required" | 3 |
| :valid | :valid | Используется для соответствия элементов с законными значениями ввода | 3 |
| :invalid | :invalid | Используется для соответствия элементов с незаконными значениями ввода | 3 |