Welche drei Arten von Attributselektoren gibt es in CSS3?-Front-End-Fragen und Antworten-php.cn

Welche drei Arten von Attributselektoren gibt es in CSS3?

青灯夜游

Freigeben： 2021-12-14 18:50:53

Original

3322 Leute haben es durchsucht

Drei Attributselektoren in CSS3: 1. „[Attributname^=Wert]“, entspricht jedem Element, dessen Attributwert mit dem angegebenen Wert beginnt. 2. „[Attributname$=Wert]“, entspricht dem Attributwert. Jedes Element endet mit dem angegebenen Wert; 3. „[Attributname*=Wert]“, entspricht jedem Element, dessen Attributwert den angegebenen Wert enthält.

Welche drei Arten von Attributselektoren gibt es in CSS3?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Drei Attributselektoren in CSS3

3Wert3
[attribute^=value]-Selektor stimmt mit Elementattributen überein. Der Wert beginnt mit dem Element mit dem angegebenen Wert. Beispiel: Legen Sie die Hintergrundfarbe aller div-Elemente fest, deren Klassenattributwert mit „test“ beginnt Welche drei Arten von Attributselektoren gibt es in CSS3?

Welche drei Arten von Attributselektoren gibt es in CSS3?

</table>[attribute$=value]<p>Attribute-Selektor[attribute^=value]属性选择器

[attribute^=value] 选择器匹配元素属性值带指定的值开始的元素。

示例：

设置class属性值以"test"开头的所有div元素的背景颜色

<!DOCTYPE html>
<html>
<head>
<style> 
[class$="test"]
{
background:#ffff00;
}
</style>
</head>
<body>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>

</body>
</html>

Nach dem Login kopieren

Welche drei Arten von Attributselektoren gibt es in CSS3?

<strong>[attribute$=value]</strong>属性选择器

[attribute$=value] 选择器匹配元素属性值带指定的值结尾的元素。

示例：

设置class属性值以"test"结尾的所有元素的背景颜色：

<!DOCTYPE html>
<html>
<head>
<style> 
[class*="test"]
{
background:#ffff00;
}
</style>
</head>
<body>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</div>

</body>
</html>

Nach dem Login kopieren

Welche drei Arten von Attributselektoren gibt es in CSS3?

[attribute*=value]

[attribute$=value] Der Selektor gleicht Elemente ab, deren Attributwerte mit dem angegebenen Wert enden.

Beispiel:

Legen Sie die Hintergrundfarbe aller Elemente fest, deren Klassenattributwert mit „test“ endet:

rrreee

Welche drei Arten von Attributselektoren gibt es in CSS3?

[attribute*=value]Attribute selector

[attribute*=value] selector Übereinstimmungen Elemente, deren Elementattributwert den angegebenen Wert enthält.

🎜Beispiel: 🎜🎜Legen Sie die Hintergrundfarbe aller Elemente fest, deren Klassenattributwert „test“ enthält 🎜rrreee🎜🎜🎜🎜 (Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜

Attributselektor	Beschreibung	Beispiel	Beispielbeschreibung	CSS
[ Attribut ^=Wert]	Passt jedes Element an dessen Attributwert mit dem angegebenen Wert beginnt.	Übereinstimmen Sie jedes Element, dessen Attributwert mit dem angegebenen Wert endet	a[src$=".pdf"]	Wählen Sie jedes Element aus, dessen src-Attributwert mit „.pdf“ endet
[attribute *=	]	Übereinstimmung mit jedem Element, dessen Attributwert den angegebenen Wert enthält	a[src*="44lan"]	Wählen Sie den Wert aus, der das untergeordnete Element jedes src-Attributs enthält. Element der Zeichenfolge „44lan“
`[attribute^=value]`Attribute-Selektor				<!DOCTYPE html> <html> <head> <style> div[class^="test"] { background:#ffff00; } </style> </head> <body> <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="test">The third div element.</div> <p class="test">This is some text in a paragraph.</p> </body> </html> Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWelche drei Arten von Attributselektoren gibt es in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!