Article
Démarrer
Démarrer la formation
JavaRush /Blog Java /Random-FR /Sélecteurs d'attributs
articles
Niveau 15

Sélecteurs d'attributs

Publié dans le groupe Random-FR
Pour changer le style des éléments contenant divers paramètres, des sélecteurs d'attributs ont été introduits dans CSS. Ils vous permettent de définir le style d'une balise en fonction de la présence d'un certain paramètre ou de sa valeur. Sélecteurs d'attributs - 1Remarque : Les sélecteurs d'attribut sont pris en charge par Internet Explorer version 7.0 et ultérieure, et le <!DOCTYPE> correct doit être ajouté pour que les exemples fonctionnent correctement. Examinons plusieurs utilisations typiques de tels sélecteurs.

Sélecteur d'attribut simple

Définit le style d'un élément si un attribut spécifique est spécifié. Sa signification n'a pas d'importance dans ce cas. La syntaxe d'utilisation d'un tel sélecteur est la suivante. 
[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }
L'espace entre le nom du sélecteur et les crochets n'est pas autorisé. L'exemple 12.1 montre comment la balise <Q> est stylisée lorsqu'un paramètre de titre y est ajouté. Exemple 12.1. Type d'élément en fonction de son paramètre 
<!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>
Le résultat de l'exemple est présenté sur la Fig. 12.1 Sélecteurs d'attributs - 2 Dans cet exemple, la couleur du texte à l'intérieur du conteneur 7lt;Q> change lorsque le paramètre title y est ajouté. Notez que pour le sélecteur Q[title] il n'est pas nécessaire de répéter les attributs puisqu'ils sont hérités du sélecteur Q.
Java-университет

Sélecteur d'attribut avec valeur

Définit le style d'un élément si une valeur spécifique est spécifiée pour un paramètre spécifique. La syntaxe de l'application est la suivante. 
[атрибут="meaning"] { Описание правил стиля } Селектор[атрибут="meaning"] { Описание правил стиля }
Dans le premier cas, le style est appliqué à tous les éléments contenant la valeur d'attribut spécifiée. Et dans le second - uniquement à certains sélecteurs. L'exemple 12.2 montre comment changer le style du lien si la balise A contient un paramètre target="_blank". Dans ce cas, le lien s'ouvrira dans une nouvelle fenêtre et pour le montrer, en utilisant les styles, nous ajoutons une petite image devant le texte du lien. Exemple 12.2. Style pour ouvrir les liens dans une nouvelle fenêtre 
<!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>
Le résultat de l’exemple est présenté ci-dessous (Figure 12.2). Sélecteurs d'attributs - 3Dans cet exemple, une image est ajoutée au lien à l'aide de l'attribut background. Sa fonction est de créer une image d'arrière-plan répétitive, mais la répétition d'arrière-plan peut être annulée via l'argument no-repeat, ce qui donne une image unique.

L'attribut commence par une valeur spécifique

Définit le style d'un élément si l'attribut commence par la valeur spécifiée. La syntaxe de l'application est la suivante. 
[атрибут^="meaning"] { Описание правил стиля } Селектор[атрибут^="meaning"] { Описание правил стиля }
Dans le premier cas, le style est appliqué à tous les éléments commençant par la valeur d'attribut spécifiée. Et dans le second - uniquement à certains sélecteurs. Supposons que votre site doive séparer le style des liens réguliers et externes, c'est-à-dire les liens qui mènent à d'autres sites. Pour éviter d'ajouter Aune nouvelle classe à la balise, nous utiliserons des sélecteurs d'attributs. Les liens externes se caractérisent par l'ajout d'un protocole à l'adresse, par exemple, le protocole HTTP est utilisé pour accéder aux documents hypertextes. Par conséquent, les liens externes commencent par le mot-clé http://, et nous l'ajoutons au sélecteur A, comme le montre l'exemple 12.3. Exemple 12.3. Modification du style de xréf 
<!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>
Le résultat de l'exemple est présenté ci-dessous (Fig. 12.3) Sélecteurs d'attributs - 4 Dans cet exemple, les liens externes sont mis en évidence en gras. Vous pouvez également utiliser la technique présentée dans l'exemple 12.2 et ajouter une petite image au lien, ce qui indiquera que le lien mène vers un autre site.

L'attribut se termine par une valeur spécifique

Définit le style d'un élément si l'attribut se termine par la valeur spécifiée. La syntaxe de l'application est la suivante. 
[атрибут$="meaning"] { Описание правил стиля } Селектор[атрибут$="meaning"] { Описание правил стиля }
Dans le premier cas, le style est appliqué à tous les éléments se terminant par la valeur d'attribut spécifiée. Et dans le second - uniquement à certains sélecteurs. De cette façon, vous pouvez automatiquement séparer le style des sites du domaine ru et des sites d'autres domaines comme com, comme le montre l'exemple 12.4. Exemple 12.4. Style pour différents domaines 
<!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>
Cet exemple contient deux liens menant à des domaines différents - comet ru. Dans le même temps, chacun de ces liens a sa propre image d'arrière-plan ajoutée à l'aide de styles. Les attributs de style seront ajoutés uniquement pour les liens hrefdont le paramètre se termine par « .ru » ou « .com ». Veuillez noter qu'en ajoutant une barre oblique ( http://www.yandex.ru/ ) ou l'adresse de la page ( http://www.yandex.ru/fun.html ) au nom de domaine, nous modifierons ainsi la terminaison et le style ne sera pas appliqué. Dans ce cas, il est préférable d'utiliser un sélecteur dans lequel une valeur spécifique peut être située n'importe où dans l'attribut.

La valeur apparaît n'importe où dans l'attribut

Il existe des options dans lesquelles le style doit être appliqué à un sélecteur avec un attribut spécifique, dont une valeur fait partie. Cependant, on ne sait pas exactement si l’argument commence ou se termine par cette valeur. Ensuite, la syntaxe suivante doit être utilisée. 
[атрибут*="meaning"] { Описание правил стиля } Селектор[атрибут*="meaning"] { Описание правил стиля }
La valeur peut apparaître n'importe où dans l'argument, par exemple au début, à la fin ou quelque part entre les deux. L'essentiel est que cela en fasse partie. Ainsi, l'exemple 12.5 montre un changement dans le style des liens dans lesquels le mot « htmlbook » apparaît. Exemple 12.5. Style pour différents sites 
<!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>
Le résultat de cet exemple est présenté sur la Fig. 12.4 Sélecteurs d'attributs - 5 Il existe d'autres types de sélecteurs d'arguments, mais ils sont assez rarement utilisés, nous omettrons donc leur description. Lien vers la source originale : http://stepbystep.htmlbook.ru/?id=54
Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION