| Селектор сравнения образцов
Любое правило CSS начинается с селектора. Селектор представляет собой выражение, определяющее сравнение с образцом, который связывает конкретный элемент XML с конкретным правилом. Когда обработчик CSS находит элемент соответствующий селектору, правило запускается. Запуск правила означает просто создание объекта визуализации, который приобретает свойства, заданные телом правила. В таблице ниже показан набор типов селектора, поддерживаемых стандартом CSS2:
Образец
|
Значение
|
*
|
Соответствует любому элементу
|
Е
|
Соответствует любому элементу Е (любому элементу типа Е)
|
е, f
|
Соответствует любому элементу Е или элементу F
|
Е F
|
Соответствует любому элементу F, являющемуся потомком элемента Е
|
Е > F
|
Соответствует любому элементу F, являющемуся непосредственным потомком элемента Е
|
Е: first-child
|
Соответствует элементу Е, если Е является первым непосредственным потомком своего родителя
|
E: link
Е: visited
|
Соответствует элементу Е, если Е представляет собой исходный якорь гиперссылки, которая еще не посещалась (: link) или уже посещалась (:visited)
|
E: active
E: hover
E: focus
|
Соответствует элементу Е при определенных действиях пользователя
|
Е:lang( с)
|
Соответствует элементу типа Е, если Е написан на языке с (человеческом). Каким образом определяется язык, показывает язык документа
|
Е + F
|
Соответствует любому элементу F, которому непосредственно предшествует элемент Е
|
E [foo]
|
Соответствует любому элементу Е с заданным атрибутом foo (независимо от его значения)
|
E [foo = "warning"]
|
Соответствует любому элементу Е, атрибут foo которого точно равен выражению "warning"
|
Е [foo ~= "warning"]
|
Соответствует любому элементу Е, атрибут foo которого представляет собой список значений, разделенных пробелами, одно из которых точно равно выражению "warning"
|
E [lang | = "еn"]
|
Соответствует любому элементу Е, атрибут "lang" которого содержит разделенный дефисами список значений, начинающихся слева с сочетания "еn"
|
E#myid
|
Соответствует любому элементу Е, атрибут ID которого равен myid
|
Селектор представляет собой последовательность одного или нескольких простых селекторов. Как сказано в спецификации CSS2: "Простой селектор представляет собой либо селектор типа, либо универсальный селектор, за которым, сразу же следует ноль или более селекторов атрибутов, селекторов ID или псевдоклассов в любом порядке. Соответствие простому селектору достигается, если оно достигнуто по всем компонентам."
Селектор типа представляет собой просто имя элемента XML, которое соответствует любому вхождению этого элемента в дерево документа XML. Универсальный селектор представляет собой знак "*", означающий соответствие любому элементу.
Селекторы атрибутов позволяют осуществлять более точный выбор или сравнение образцов, вплоть до атрибутов или даже значений атрибутов. Например, если значение атрибута language элемента равно "English", то совместно с этим элементом можно использовать следующие правила:
</p>
<p>TITLE {display: block;}</p>
<p>TITLE [language] {display: block;}
</p>
<p>TITLE [language ="English"} {display: block;:.}</p>
<p>Первое правило определяет соответствие всем элементам <TITLE>, даже тем, у которых нет атрибута language, и все эти элементы будут отображаться в виде элементов уровня блока. Второе правило определяет соответствие любому элементу с атрибутом language, независимо от значения последнего. И, наконец, последнее правило соответствует только тем элементам <TITLE>, у которых значение атрибута language равно English.
</p>
<p>Значительно более детального соответствия можно добиться с помощью селектора ID. Он позволяет применить правило к конкретному элементу, имеющему конкретный ID.</p>
<p>Обычно правила CSS связываются с элементом на основе его положения в дереве документа. Однако селекторы псевдоклассов позволяют обращаться к узлам других типов в дереве документа. Например, псевдокласс first-child позволяет найти и связать правило с первым элементом, порожденным заданным элементом:
</p>
<p>TITLE: first-child {...}</p>
<p>Затем конкретное правило CSS можно связать с объектом дерева документа, не указывая явным образом его имя.
</p>
<p>Еще одним типом интересного селектора являются псевдоэлементы. Например, может оказаться необходимым переформатировать первую строку параграфа по-другому или первую букву главы написать более крупным шрифтом. В следующем примере выбирается первая строка из содержания данных элемента <DESCRIPTION>, а затем к ней применяется коллекция свойств из этого правила:</p>
<p>DESCRIPTION: first-line{...}
</p>
<p>А в следующем коде со свойствами правила ассоциируется первая буква этого содержания:</p>
<p>DESCRIPTION: first-letter{...}
</p>
<p>Простые селекторы можно связать цепочкой в одно селекторное выражение, но каждый простой селектор в нем отделяется символами пустого пространства, знаком > или +.</p>
<p>Выражение:
</p>
<p>ITEM, TITLE</p>
<p>представляет собой селектор, соответствующий либо элементам <ITEM>, либо элементам <TITLE>. Это означает, что запятую можно также считать неявным или логическим выражением.
</p>
<p>В выражении</p>
<p>ITEM > TITLE
</p>
<p>будут выбраны только те элементы <TITLE>, которые являются потомками элемента <IТЕМ>. Это означает, что, если элемент <TITLE> содержится в другом месте типа документа или его структуры, правило не будет выполнено. Например, если элемент <TITLE> является потомком элемента <DOCUMENT>, то он не будет соответствовать правилу, имеющему описанный селектор. </p>
<p>Селектор
</p>
<p>ITEM+TITLE</p>
<p>выбирает только те элементы <TITLE>, непосредственно перед которыми находится элемент <ITEM>. Если, например, перед элементом <TITLE> расположен элемент <CATEGORY>, правило не будет выполнено.
</p>
<p>С помощью группы селекторов, объединенных в список, элементы которого отделяются друг от друга запятой, с одним правилом можно сравнить элементов:</p>
<p>TITLE [language = "English"],: ITEM, DOCUMENT > ВОOK
</p>
<p>{
<p>…</p>
<br />
<br />}
<br />
<br /></category>
Достарыңызбен бөлісу: |
