属性选择器

已在 Random-ZH 群组中发布

为了更改包含各种参数的元素的样式，CSS 中引入了属性选择器。它们允许您根据某个参数或其值的存在来设置标签的样式。属性选择器 - 1

注意： Internet Explorer 7.0 及更高版本支持属性选择器，并且必须添加正确的 <!DOCTYPE> 示例才能正常工作。让我们看一下此类选择器的几种典型用途。

简单的属性选择器

如果指定了特定属性，则设置元素的样式。在这种情况下，其含义并不重要。使用此类选择器的语法如下。

[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }

选择器名称和方括号之间不允许有空格。示例 12.1 显示了在向 <Q> 标签添加标题参数时如何设置其样式。 例 12.1。元素类型取决于其参数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   Q {
    font-style: italic; /* Курсивное начертание */
    quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */
   }
   Q[title] {
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность
  может случиться, то она обязательно случится</q>, можем ввести свое наблюдение:
  <q title="Из законов Фергюсона-Мержевича">После
  того, How веб-page будет корректно отображаться в одном браузере, выяснится,
  что она неправильно показывается в другом</q>.</p>
 </body>
</html>

示例的结果如图所示。12.1 属性选择器 - 2

在此示例中，当添加 title 参数时，7lt;Q> 容器内文本的颜色会发生变化。请注意，对于 Q[title] 选择器，无需重复属性，因为它们是从 Q 选择器继承的。

带值的属性选择器

如果为特定参数指定了特定值，则设置元素的样式。应用程序语法如下。

[атрибут="meaning"] { Описание правил стиля } Селектор[атрибут="meaning"] { Описание правил стиля }

在第一种情况下，样式应用于包含指定属性值的所有元素。在第二个中 - 仅适用于某些选择器。示例 12.2 显示了如果 A 标记包含参数，如何更改链接样式target="_blank"。在这种情况下，链接将在新窗口中打开，为了显示这一点，我们使用样式在链接文本前面添加了一个小图片。 例 12.2。在新窗口中打开链接的样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[target="_blank"] {
    background: url(blank.gif) no-repeat 0 2px; /* Параметры фонового рисунка */
    padding-left: 15px; /* Смещаем текст вправо */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная link</a> |
     <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>

该示例的结果如下所示（图 12.2）。 属性选择器 - 3

在此示例中，使用属性将图片添加到链接中background。它的功能是创建一个重复的背景图像，但是可以通过参数取消背景重复no-repeat，从而产生单个图像。

属性以特定值开头

如果属性以指定值开头，则设置元素的样式。应用程序语法如下。

[атрибут^="meaning"] { Описание правил стиля } Селектор[атрибут^="meaning"] { Описание правил стиля }

在第一种情况下，样式应用于以指定属性值开头的所有元素。在第二个中 - 仅适用于某些选择器。假设您的网站需要将常规链接和外部链接（指向其他网站的链接）的样式分开。为了避免A向标签添加新类，我们将使用属性选择器。外部链接的特点是在地址中添加协议，例如HTTP协议用于访问超文本文档。因此，外部链接以关键字 http:// 开头，我们将其添加到选择器中A，如示例 12.3 所示。 例 12.3。更改外部参照样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href^="http://"] {
    font-weight: bold; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная link</a> |
  <a href="http://htmlbook.ru" target="_blank" rel="nofollow" >Внешняя link на сайт htmlbook.ru</a></p>
 </body>
</html>

示例的结果如下所示（图 12.3） 属性选择器 - 4

在此示例中，外部链接以粗体突出显示。您还可以使用示例 12.2 中所示的技术，并向链接添加一个小图像，这将表明该链接指向另一个站点。

该属性以特定值结尾

如果属性以指定值结尾，则设置元素的样式。应用程序语法如下。

[атрибут$="meaning"] { Описание правил стиля } Селектор[атрибут$="meaning"] { Описание правил стиля }

在第一种情况下，样式应用于以指定属性值结尾的所有元素。在第二个中 - 仅适用于某些选择器。这样，您可以自动分离 ru 域的网站和 com 等其他域的网站的样式，如示例 12.4 所示。 例 12.4。不同领域的风格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href$=".ru"] { /* Если link заканчивается на .ru */
    background: url(ru.gif) no-repeat; /* Параметры фонового рисунка */
    padding-left: 10px; /* Смещаем текст вправо */
   }
   A[href$=".com"] { /* Если link заканчивается на .com */
    background: url(com.gif) no-repeat;
    padding-left: 10px;
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.yandex.com" rel="nofollow" >Yandex.Com</a> |
  <a href="http://www.yandex.ru" rel="nofollow" >Yandex.Ru</a></p>
 </body>
</html>

此示例包含两个指向不同域的链接 -com和ru。同时，每个此类链接都有自己使用样式添加的背景图像。仅对参数以“.ru”或“.com”结尾的链接添加样式属性href。请注意，通过在域名中添加斜杠 ( http://www.yandex.ru/ ) 或页面地址 ( http://www.yandex.ru/fun.html )，我们将更改结尾和该样式将不会被应用。在这种情况下，最好使用一个选择器，其中特定值可以位于属性中的任何位置。

该值出现在属性中的任何位置

当样式应应用于具有特定属性（其中值是其中一部分）的选择器时，有一些选项。但是，尚不清楚参数是否以此值开始或结束。那么应该使用以下语法。

[атрибут*="meaning"] { Описание правил стиля } Селектор[атрибут*="meaning"] { Описание правил стиля }

该值可以出现在参数中的任何位置，例如开头、结尾或中间的某个位置。最主要的是它是其中的一部分。因此，例 12.5 显示了出现“htmlbook”一词的链接样式的变化。 例 12.5。不同网站的风格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   [href*="htmlbook"] {
    background: yellow; /* Желтый цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.htmlbook.ru/html/" rel="nofollow" >Tagи HTML</a> |
  <a href="http://stepbystep.htmlbook.ru" rel="nofollow" >Шаг за шагом</a> |
  <a href="http://webimg.ru" rel="nofollow" >Графика для Веб</a></p>
 </body>
</html>

该示例的结果如图所示。12.4 属性选择器 - 5

还有一些其他类型的参数选择器，但它们很少使用，所以我们将省略它们的描述。原始来源链接：http://stepbystep.htmlbook.ru/?id =54

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION