Artikel
Start
Jetzt lernen
JavaRush /Java-Blog /Random-DE /Attributselektoren
articles
Level 15

Attributselektoren

Veröffentlicht in der Gruppe Random-DE
Um den Stil von Elementen zu ändern, die verschiedene Parameter enthalten, wurden Attributselektoren in CSS eingeführt. Sie ermöglichen es Ihnen, den Stil eines Tags basierend auf dem Vorhandensein eines bestimmten Parameters oder seines Werts festzulegen. Attributselektoren – 1Hinweis: Attributselektoren werden von Internet Explorer Version 7.0 und höher unterstützt und der richtige <!DOCTYPE> muss hinzugefügt werden, damit die Beispiele ordnungsgemäß funktionieren. Schauen wir uns einige typische Verwendungszwecke solcher Selektoren an.

Einfacher Attributselektor

Legt den Stil für ein Element fest, wenn ein bestimmtes Attribut angegeben ist. Ihre Bedeutung ist in diesem Fall nicht wichtig. Die Syntax für die Verwendung eines solchen Selektors lautet wie folgt. 
[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }
Zwischen dem Selektornamen und eckigen Klammern ist kein Leerzeichen zulässig. Beispiel 12.1 zeigt, wie das <Q>-Tag gestaltet wird, wenn ihm ein Titelparameter hinzugefügt wird. Beispiel 12.1. Typ des Elements abhängig von seinem Parameter 
<!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="Из законов Фергюсона-Мержевича">После
  того, Wie веб-Buchseite будет корректно отображаться в одном браузере, выяснится,
  что она неправильно показывается в другом</q>.</p>
 </body>
</html>
Das Ergebnis des Beispiels ist in Abb. dargestellt. 12.1 Attributselektoren – 2 In diesem Beispiel ändert sich die Farbe des Texts im 7lt;Q>-Container, wenn ihm der Titelparameter hinzugefügt wird. Beachten Sie, dass für den Q[title]-Selektor keine Notwendigkeit besteht, die Attribute zu wiederholen, da sie vom Q-Selektor geerbt werden.
Java-университет

Attributselektor mit Wert

Legt den Stil für ein Element fest, wenn ein bestimmter Wert für einen bestimmten Parameter angegeben wird. Die Anwendungssyntax lautet wie folgt. 
[атрибут="Bedeutung"] { Описание правил стиля } Селектор[атрибут="Bedeutung"] { Описание правил стиля }
Im ersten Fall wird der Stil auf alle Elemente angewendet, die den angegebenen Attributwert enthalten. Und im zweiten Fall nur für bestimmte Selektoren. Beispiel 12.2 zeigt, wie man den Linkstil ändert, wenn das A-Tag einen Parameter enthält target="_blank". In diesem Fall öffnet sich der Link in einem neuen Fenster und um dies anzuzeigen, fügen wir mithilfe von Stilen ein kleines Bild vor dem Linktext ein. Beispiel 12.2. Stil zum Öffnen von Links in einem neuen Fenster 
<!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">Обычная Verknüpfung</a> |
     <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>
Das Ergebnis des Beispiels ist unten dargestellt (Abbildung 12.2). Attributselektoren – 3In diesem Beispiel wird dem Link mithilfe des Attributs ein Bild hinzugefügt background. Seine Funktion besteht darin, ein sich wiederholendes Hintergrundbild zu erstellen. Die Hintergrundwiederholung kann jedoch über das Argument abgebrochen werden no-repeat, was zu einem einzelnen Bild führt.

Das Attribut beginnt mit einem bestimmten Wert

Legt den Stil für ein Element fest, wenn das Attribut mit dem angegebenen Wert beginnt. Die Anwendungssyntax lautet wie folgt. 
[атрибут^="Bedeutung"] { Описание правил стиля } Селектор[атрибут^="Bedeutung"] { Описание правил стиля }
Im ersten Fall wird der Stil auf alle Elemente angewendet, die mit dem angegebenen Attributwert beginnen. Und im zweiten Fall nur für bestimmte Selektoren. Nehmen wir an, dass Ihre Website den Stil von regulären und externen Links – Links, die zu anderen Websites führen – trennen muss. Um zu vermeiden, dass Adem Tag eine neue Klasse hinzugefügt wird, verwenden wir Attributselektoren. Externe Links zeichnen sich dadurch aus, dass der Adresse ein Protokoll hinzugefügt wird. Beispielsweise wird das HTTP-Protokoll für den Zugriff auf Hypertextdokumente verwendet. Daher beginnen externe Links mit dem Schlüsselwort http:// und wir fügen es dem Selektor hinzu A, wie in Beispiel 12.3 gezeigt. Beispiel 12.3. Ändern des XRef-Stils 
<!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">Обычная Verknüpfung</a> |
  <a href="http://htmlbook.ru" target="_blank" rel="nofollow" >Внешняя Verknüpfung на сайт htmlbook.ru</a></p>
 </body>
</html>
Das Ergebnis des Beispiels ist unten dargestellt (Abb. 12.3) Attributselektoren – 4 . In diesem Beispiel sind externe Links fett hervorgehoben. Sie können auch die in Beispiel 12.2 gezeigte Technik verwenden und dem Link ein kleines Bild hinzufügen, das anzeigt, dass der Link zu einer anderen Site führt.

Das Attribut endet mit einem bestimmten Wert

Legt den Stil für ein Element fest, wenn das Attribut mit dem angegebenen Wert endet. Die Anwendungssyntax lautet wie folgt. 
[атрибут$="Bedeutung"] { Описание правил стиля } Селектор[атрибут$="Bedeutung"] { Описание правил стиля }
Im ersten Fall wird der Stil auf alle Elemente angewendet, die mit dem angegebenen Attributwert enden. Und im zweiten Fall nur für bestimmte Selektoren. Auf diese Weise können Sie den Stil automatisch für Websites der ru-Domäne und für Websites anderer Domänen wie com trennen, wie in Beispiel 12.4 gezeigt. Beispiel 12.4. Stil für verschiedene Domänen 
<!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"] { /* Если Verknüpfung заканчивается на .ru */
    background: url(ru.gif) no-repeat; /* Параметры фонового рисунка */
    padding-left: 10px; /* Смещаем текст вправо */
   }
   A[href$=".com"] { /* Если Verknüpfung заканчивается на .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>
Dieses Beispiel enthält zwei Links, die zu unterschiedlichen Domains führen – comund ru. Gleichzeitig wird jedem dieser Links ein eigenes Hintergrundbild mit Stilen hinzugefügt. Stilattribute werden nur für Links hinzugefügt, hrefderen Parameter auf „.ru“ oder „.com“ endet. Bitte beachten Sie, dass wir durch das Hinzufügen eines Schrägstrichs ( http://www.yandex.ru/ ) oder der Seitenadresse ( http://www.yandex.ru/fun.html ) zum Domainnamen die Endung und ändern Der Stil wird nicht angewendet. In diesem Fall ist es besser, einen Selektor zu verwenden, bei dem sich ein bestimmter Wert an einer beliebigen Stelle im Attribut befinden kann.

Der Wert kommt an einer beliebigen Stelle im Attribut vor

Es gibt Optionen, wenn der Stil auf einen Selektor mit einem bestimmten Attribut angewendet werden soll, zu dem ein Wert gehört. Allerdings ist nicht genau bekannt, ob das Argument mit diesem Wert beginnt oder endet. Dann sollte die folgende Syntax verwendet werden. 
[атрибут*="Bedeutung"] { Описание правил стиля } Селектор[атрибут*="Bedeutung"] { Описание правил стиля }
Der Wert kann an einer beliebigen Stelle im Argument erscheinen, beispielsweise am Anfang, am Ende oder irgendwo dazwischen. Die Hauptsache ist, dass es ein Teil davon ist. So zeigt Beispiel 12.5 eine Änderung im Stil von Links, in denen das Wort „htmlbook“ vorkommt. Beispiel 12.5. Stil für verschiedene Websites 
<!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" >Schildи HTML</a> |
  <a href="http://stepbystep.htmlbook.ru" rel="nofollow" >Шаг за шагом</a> |
  <a href="http://webimg.ru" rel="nofollow" >Графика для Веб</a></p>
 </body>
</html>
Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 12.4 Attributselektoren – 5 Es gibt noch einige andere Arten von Argumentselektoren, die jedoch recht selten verwendet werden, weshalb wir auf ihre Beschreibung verzichten. Link zur Originalquelle: http://stepbystep.htmlbook.ru/?id=54
Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION