Источник: http://wa.artel.by/
Вообще достаточно сложно классифицировать те или иные методы сокрытия таблиц стилей с помощью селекторов. Так что будет простое перечисление методов.
Эти виды селекторов появились в спецификации CSS-2. Но некоторые из них уже поддерживаются браузерами Opera 5+ и Netscape 6 (еще их поддерживает достаточно популярный браузер под Linuх, который называется Konqueror). На данный момент поддерживается три вида селекторов по атрибутам.
Стили применяются к элементу, в котором имеется указанный атрибут. Например, если в коде написать
<P CLASS="first">Абзац текста</P>
то сделать текст красным внутри этого элемента можно таким образом:
P[CLASS] {
color: #F00}
Но заметьте, что если у нас в коде будет присутствовать элемент
с другим классом, то он все равно станет красным (если, конечно, на данный класс уже не указан в стиле другой цвет). Например, в таком коде
P[CLASS] {
color: #F00}
. . .
<P
CLASS="first">Абзац текста</P>
<P CLASS="second">Абзац
текста</P>
Все абзацы будут красными. Но если задать цвет для класса явно
P[CLASS] {
color: #F00}
P.second {
color: #000}
.
. .
<P CLASS="first">Абзац текста</P>
<P
CLASS="second">Абзац текста</P>
то второй абзац будет черным. Этот селектор корректно поддерживается браузерами Opera 5+ и Netscape 6. Для более точной выборки существует еще селектор.
В этом случае стили применяются к элементу, который имеет атрибут с определенным значением. В нашем примере это делается так:
P[CLASS=first] {
color: #F00}
. . .
<P
CLASS="first">Абзац текста</P>
Браузер Netscape 6 корректно поддерживает этот селектор, а вот у браузера Opera 5+ есть некоторые проблемы. Дело в том, что он понимает этот селектор, если атрибутом является, например, CLASS="first", но не понимает, если атрибутом является ALIGN="right". Как видим, не все атрибуты могут использоваться для такого селектора. Какие именно, надо устанавливать опытным путем.
Третий вид формируется так:
В этом случае стили применяются к элементу, который имеет атрибут с некоторым набором значений, разделенными пробелами, и одно из значений, указанное в селекторе, имеется среди значений атрибута. Для чего это вообще надо? Вот возможный способ применения. Например, нам надо к одному из абзацев текста применить такие стили, чтобы текст выводился полужирным красным шрифтом. А к другому, чтобы текст выводился полужирным синим шрифтом. Конечно, можно просто написать такие классы:
P.first {
color: #F00;
font-weight: bold}
P.second
{
color: #00F;
font-weight: bold}
. . .
<P
CLASS="first">Красный абзац текста</P>
<P CLASS="second">Синий
абзац текста</P>
Получается, что у нас есть несколько разных классов, где применяется полужирный шрифт, но зато там разные цвета. А можно поступить следующим образом: сделать отдельный класс для полужирного шрифта и совмещать затем его с другими классами, которые имеют другой цвет. Тогда таблица стилей для двух абзацев разного цвета будет выглядеть так:
.bld {
font-weight: bold}
P.first {
color:
#F00}
P.second {
color: #00F}
А в коде мы укажем классы через пробел:
<P CLASS="first bld">Красный абзац
текста</P>
<P CLASS="second bld">Синий абзац
текста</P>
Произойдет микширование классов. Если какое-то объявление часто кочует из класса в класс (как font-weight: bold в нашем случае), то создание для него отдельного класса с последующим микшированием сократит код. Кстати, такое микширование корректно поддерживается шестыми версиями всех браузеров. А селектор [attr~=val] понимают браузеры Netscape 6 и Opera 5+.
Итак, чтобы скрыть стили от браузеров Netscape 4 и Internet Explorer всех версий, надо к элементу обратиться через атрибут. Все нижеприведенные примеры скрывают стили от Netscape 4 и Internet Explorer:
TD[class] {
border: 1px solid #000}
TD[class=brd]
{
border: 1px solid #000}
TD[class~=brd] {
border: 1px solid #000}
.
. .
<TABLE>
<TR>
<TD CLASS="brd">ячейка с
рамкой</TD>
</TR>
</TABLE>
В указанных выше браузерах таблица будет без рамки, а вот в Opera 5+ и Netscape 6 рамка будет.
В CSS-2 есть достаточно удобный селектор, который позволяет применять стили к потомкам элемента. Например, у нас в коде встречаются абзацы текста, заключенные в теги <P></P>. Встречаются они непосредственно внутри элемента <BODY>, а также вложенные в отдельные блоки, образованные элементами <DIV> (допустим, это может быть блок новостей).
<BODY>
<P>Текст на сайте</P>
<DIV
id="news">
<P>Текст
новости</P>
</DIV>
</BODY>
Нам надо, чтобы внутри <BODY> текст был черного цвета, а внутри блоков новостей — серого. Можно написать отдельный класс, но можно воспользоваться селектором наследника. Наша задача решается такой таблицей стилей:
BODY>P {
color: #000}
DIV>P {
color:
#CCC}
Но данные стили не увидят браузеры Netscape 4 и Internet Explorer 4+, так что селектором наследника можно с успехом пользоваться для сокрытия стилей от этих браузеров (что, собственно, и делается в методе Целика). Кроме селекторов, есть еще и баги браузеров, с помощью которых можно писать кросс-браузерный код. О них поговорим в следующий раз.