屬性選擇器

在 Random-TW 群組發布

為了更改包含各種參數的元素的樣式，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/fun.html) 或頁面位址 (http://www.yandex.ru/加入斜線 ( 在這種情況下，最好使用一個選擇器，其中特定值可以位於屬性中的任何位置。

該值出現在屬性中的任何位置

當樣式應套用於具有特定屬性（其中值是其中一部分）的選擇器時，有一些選項。但是，尚不清楚參數是否以此值開始或結束。那麼應該使用以下語法。

[атрибут*="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