Artykuł
Rozpocznij
Rozpocznij naukę
JavaRush /Blog Java /Random-PL /Selektory atrybutów
articles
Poziom 15

Selektory atrybutów

Opublikowano w grupie Random-PL
Aby zmienić styl elementów zawierających różne parametry, do CSS wprowadzono selektory atrybutów. Pozwalają ustawić styl tagu na podstawie obecności określonego parametru lub jego wartości. Selektory atrybutów - 1Uwaga: Selektory atrybutów są obsługiwane przez przeglądarkę Internet Explorer w wersji 7.0 i nowszych, dlatego aby przykłady działały poprawnie, należy dodać poprawny <!DOCTYPE>. Przyjrzyjmy się kilku typowym zastosowaniom takich selektorów.

Prosty selektor atrybutów

Ustawia styl elementu, jeśli określono określony atrybut. Jego znaczenie nie jest w tym przypadku istotne. Składnia użycia takiego selektora jest następująca. 
[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }
Spacja pomiędzy nazwą selektora a nawiasami kwadratowymi jest niedozwolona. Przykład 12.1 pokazuje, jak wygląda styl znacznika <Q> po dodaniu do niego parametru tytułu. Przykład 12.1. Rodzaj elementu w zależności od jego parametru 
<!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="Из законов Фергюсона-Мержевича">После
  того, Jak веб-strona будет корректно отображаться в одном браузере, выяснится,
  что она неправильно показывается в другом</q>.</p>
 </body>
</html>
Wynik przykładu pokazano na ryc. 12.1 Selektory atrybutów - 2 W tym przykładzie kolor tekstu wewnątrz kontenera 7lt;Q> zmienia się po dodaniu do niego parametru title. Należy zauważyć, że w przypadku selektora Q[title] nie ma potrzeby powtarzania atrybutów, ponieważ są one dziedziczone z selektora Q.
Java-университет

Selektor atrybutów z wartością

Ustawia styl elementu, jeśli dla określonego parametru określono określoną wartość. Składnia aplikacji jest następująca. 
[атрибут="oznaczający"] { Описание правил стиля } Селектор[атрибут="oznaczający"] { Описание правил стиля }
W pierwszym przypadku styl zostanie zastosowany do wszystkich elementów, które zawierają określoną wartość atrybutu. A w drugim - tylko dla niektórych selektorów. Przykład 12.2 pokazuje, jak zmienić styl łącza, jeśli znacznik A zawiera parametr target="_blank". W takim przypadku link otworzy się w nowym oknie i aby to pokazać za pomocą stylów dodajemy mały obrazek przed tekstem linku. Przykład 12.2. Styl otwierania linków w nowym oknie 
<!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">Обычная połączyć</a> |
     <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>
Wynik przykładu pokazano poniżej (rysunek 12.2). Selektory atrybutów - 3W tym przykładzie do linku dodawane jest zdjęcie przy użyciu atrybutu background. Jego funkcją jest tworzenie powtarzającego się obrazu tła, ale powtarzanie tła można anulować za pomocą argumentu no-repeat, co skutkuje pojedynczym obrazem.

Atrybut zaczyna się od określonej wartości

Ustawia styl elementu, jeśli atrybut zaczyna się od określonej wartości. Składnia aplikacji jest następująca. 
[атрибут^="oznaczający"] { Описание правил стиля } Селектор[атрибут^="oznaczający"] { Описание правил стиля }
W pierwszym przypadku styl zostanie zastosowany do wszystkich elementów rozpoczynających się od określonej wartości atrybutu. A w drugim - tylko dla niektórych selektorów. Załóżmy, że Twoja witryna musi oddzielić styl linków zwykłych i zewnętrznych – linków prowadzących do innych witryn. Aby uniknąć dodawania Anowej klasy do tagu, użyjemy selektorów atrybutów. Linki zewnętrzne charakteryzują się tym, że do adresu dodawany jest protokół, np. protokół HTTP służy do dostępu do dokumentów hipertekstowych. Dlatego linki zewnętrzne zaczynają się od słowa kluczowego http:// i dodajemy je do selektora A, jak pokazano w przykładzie 12.3. Przykład 12.3. Zmiana stylu odnośnika zewnętrznego 
<!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">Обычная połączyć</a> |
  <a href="http://htmlbook.ru" target="_blank" rel="nofollow" >Внешняя połączyć на сайт htmlbook.ru</a></p>
 </body>
</html>
Wynik przykładu pokazano poniżej (ryc. 12.3) Selektory atrybutów - 4 . W tym przykładzie linki zewnętrzne zostały wyróżnione pogrubioną czcionką. Możesz także skorzystać z techniki pokazanej w przykładzie 12.2 i dodać do linku mały obrazek, który będzie wskazywał, że link prowadzi do innej witryny.

Atrybut kończy się określoną wartością

Ustawia styl elementu, jeśli atrybut kończy się określoną wartością. Składnia aplikacji jest następująca. 
[атрибут$="oznaczający"] { Описание правил стиля } Селектор[атрибут$="oznaczający"] { Описание правил стиля }
W pierwszym przypadku styl zostanie zastosowany do wszystkich elementów, które kończą się określoną wartością atrybutu. A w drugim - tylko dla niektórych selektorów. W ten sposób możesz automatycznie oddzielić styl witryn z domeny ru i witryn z innych domen, takich jak com, jak pokazano w przykładzie 12.4. Przykład 12.4. Styl dla różnych domen 
<!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"] { /* Если połączyć заканчивается на .ru */
    background: url(ru.gif) no-repeat; /* Параметры фонового рисунка */
    padding-left: 10px; /* Смещаем текст вправо */
   }
   A[href$=".com"] { /* Если połączyć заканчивается на .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>
Ten przykład zawiera dwa linki prowadzące do różnych domen - comi ru. Jednocześnie każdy taki link ma swój własny obraz tła dodany za pomocą stylów. Atrybuty stylu zostaną dodane tylko dla tych linków href, których parametr kończy się na „.ru” lub „.com”. Należy pamiętać, że dodając ukośnik ( http://www.yandex.ru/ ) lub adres strony ( http://www.yandex.ru/fun.html ) do nazwy domeny, zmienimy w ten sposób końcówkę i styl nie zostanie zastosowany. W takim wypadku lepiej zastosować selektor, w którym określona wartość może znajdować się w dowolnym miejscu atrybutu.

Wartość występuje w dowolnym miejscu atrybutu

Istnieją opcje, w których styl powinien zostać zastosowany do selektora z określonym atrybutem, którego częścią jest wartość. Nie wiadomo jednak dokładnie, czy argument zaczyna się, czy kończy na tej wartości. Następnie należy zastosować następującą składnię. 
[атрибут*="oznaczający"] { Описание правил стиля } Селектор[атрибут*="oznaczający"] { Описание правил стиля }
Wartość może pojawić się w dowolnym miejscu argumentu, na przykład na początku, na końcu lub gdzieś pomiędzy. Najważniejsze, że jest jego częścią. Zatem przykład 12.5 pokazuje zmianę stylu linków, w których pojawia się słowo „htmlbook”. Przykład 12.5. Styl dla różnych witryn 
<!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" >Etykietkaи HTML</a> |
  <a href="http://stepbystep.htmlbook.ru" rel="nofollow" >Шаг за шагом</a> |
  <a href="http://webimg.ru" rel="nofollow" >Графика для Веб</a></p>
 </body>
</html>
Wynik tego przykładu pokazano na ryc. 12.4 Selektory atrybutów - 5 Istnieją jeszcze inne rodzaje selektorów argumentów, ale są one używane dość rzadko, dlatego pominiemy ich opis. Link do oryginalnego źródła: http://stepbystep.htmlbook.ru/?id=54
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION