Die Anleitung zu CSS Attribute Selector
View more Tutorials:
CSS Attribute Selector hilft Ihnen bei der Auswahl der Elementen, die auf den Wert von der gegebenen Attributen basiert.
CSS Attribute Selector ist ein der grundlegenden CSS Selector , aber er fasst die vielen Inhalten um. Deshalb schreibe ich ihn in einen eigenen Artikel. Die sonstigen grundlegenden CSS Selector können Sie in den folgenden Artikel lesen:
CSS [Attribute] Selector hilft Ihnen bei der Suche nach den Elementen mit den bestimmten Attributen ungeachtet des Wert dieses Attribut.
Z.B: Die allen Elementen <a> mit dem Attribut target ungeachtet dem Wert dieses Attribut suchen.
attr-selector-example1.css
a[target] { background-color: yellow; }
attr-selector-example1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS [Attribute] Selector</title> <link rel="stylesheet" type="text/css" href="attr-selector-example1.css" /> </head> <body> <h3>CSS [Attribute] Selector</h3> <ul> <li><a href="#" target="_blank">HTML Tutorial</a></li> <li><a href="#" target="_self">CSS Tutorial</a></li> <li><a href="#">Other Tutorial</a></li> </ul> </body> </html>
CSS [Attribute='value'] Selector wird benutzt um die Elementen zu finden, in den der Wert vom Attribut dem vorgegebenen Wert entspricht. Selector ist nicht Case-insensitive .
Z.B Suchen Sie die Elementen <a> mit dem Wert vom Attribut Target als "_blank". nicht Case-insensitive.
[target="_blank"] | |
Target | OK? |
_blank | ![]() |
_Blank | ![]() |
_BLANK | ![]() |
_Self |
attr-selector-example13.css
a[target="_blank"] { background-color: yellow; }
attr-selector-example13.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS [Attribute="value"] Selector</title> <link rel="stylesheet" type="text/css" href="attr-selector-example13.css" /> </head> <body> <h3>CSS [Attribute="value"] Selector</h3> <p>a[target="_blank"]</p> <ul> <li><a href="#" target="_blank">HTML Tutorial</a></li> <li><a href="#" target="_BLANK">Javascript Tutorial</a></li> <li><a href="#" target="_self">CSS Tutorial</a></li> <li><a href="#">Other Tutorial</a></li> </ul> <p><b>Note:</b> For [<i>attribute</i>=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body> </html>
CSS [Attribute~='value'] Selector wird benutzt um die Elementen zu finden, in dem der Wert vom Attribut ein bestimmtes Wort enthaltet. Selector ist Case-insensitive (Case-sensitive).
Z.B Suchen Sie alle Elementen <img> mit dem Attribut title, das "cat" enthaltet. Achtung: Das Wort "cats" past in diese Situation nicht, denn "cat" und "cats" sind die 2 unterschiedlichen Wörter .
[title~="cat"] | |
title | OK? |
Cute baby cats | |
A Black cat | ![]() |
A Black Cat | |
A Black cat(2) | |
A Black cat-3 | |
A White Cat | |
Tiger (Belong to the cat family) | ![]() |
attr-selector-example3.css
img[title~="cat"] { border: 2px solid green; padding:3px; } img { margin: 5px; }
attr-selector-example3.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS [Attribute~="value"] Selector</title> <link rel="stylesheet" type="text/css" href="attr-selector-example3.css" /> </head> <body> <h3>CSS [Attribute~="value"] Selector</h3> <p>img[title~="cat"]</p> <img src="pic-cat1.png" title="Cute baby cats"/> <img src="pic-cat2.png" title="A Black cat"/> <img src="pic-tiger1.png" title="Tiger (Belong to the cat family)"/> <img src="pic-deer1.png" title="A deer stands intently" /> </body> </html>
Wenn Sie möchten, CSS [Attribute~="value"] Selector ist nicht Case-insensitive, können Sie die Syntax von CSS4 benutzen:
/** Syntax: */ [Attribute~="value" i] /** Example: */ img[title~="cat" i] { border: 2px solid green; padding:3px; }
<img src="pic-cat1.png" title="Cute baby cats"/> <img src="pic-cat2.png" title="A Black Cat"/> <!-- OK --> <img src="pic-tiger1.png" title="Tiger (Belong to the cat family)"/> <!-- OK --> <img src="pic-deer1.png" title="A deer stands intently" />
CSS [Attribute|='value'] Selector wird benutzt um die Element zu finden, in dem der Wert vom Attribut dem vorgegebenen Wert ganz entspricht, oder beginnt mit dem vorgegebenen Wert und folgt das Zeichen ( - ). Dieser Selector ist Case-insensitive.
Z.B, Suchen Sie die Elementen, in dem der Wert vom Attribut Class "top" oder beginnt mit "top-".
[class|="top"] | |
class | OK? |
top | ![]() |
Top | |
top-text | ![]() |
top-content | ![]() |
left-text top-text |
attr-selector-example5.css
*[class|="top"] { border: 2px solid green; padding:3px; }
attr-selector-example5.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS [Attribute|="value"] Selector</title> <link rel="stylesheet" type="text/css" href="attr-selector-example5.css" /> </head> <body> <h3>CSS [Attribute|="value"] Selector</h3> <p>*[class|="top"]</p> <h1 class="top">CSS Tutorial</h1> <p class="top-text">CSS Selector Tutorial</p> <p class="topcontent">....</p> <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body> </html>
Wenn Sie möchten, CSS [Attribute|="value"] Selector ist nicht Case-insensitive , können Sie die Syntax von CSS4 benutzen:
/** Syntax: */ [Attribute|="value" i] /** Example: */ img[class|="top" i] { border: 2px solid green; padding:3px; }
<h1 class="top">CSS Tutorial</h1> <!-- OK --> <h1 class="Top">CSS Tutorial</h1> <!-- OK --> <p class="top-text">CSS Selector Tutorial</p> <!-- OK --> <p class="TOP-text">CSS Selector Tutorial</p> <!-- OK --> <p class="topcontent">....</p>
CSS [Attribute^="value"] Selector wird benutzt ụm die Elementen zu finden, in dem der Wert vom Attribut mit einem vorgegebenen Wert beginnt. Dieser Selector ist Case-insensitive.
Z.B suchen Sie die Elementen, in dem der Wert vom Attribut Class mit "top" beginnt.
[class^="top"] | |
class | OK? |
top | ![]() |
Top | |
top-text | ![]() |
top-content | ![]() |
topcontent | ![]() |
left-text top-text |
attr-selector-example7.css
*[class^="top"] { border: 2px solid green; padding:3px; }
attr-selector-example7.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS [Attribute^="value"] Selector</title> <link rel="stylesheet" type="text/css" href="attr-selector-example7.css" /> </head> <body> <h3>CSS [Attribute^="value"] Selector</h3> <p>*[class^="top"]</p> <h1 class="top">CSS Tutorial</h1> <p class="top-text">CSS Selector Tutorial</p> <p class="topcontent">....</p> <p><b>Note:</b> For [<i>attribute</i>^=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body> </html>
Wenn Sie möchten, CSS [Attribute^="value"] Selector ist nicht Case-insensitive, können Sie die Syntax von CSS4 benutzen:
/** Syntax: */ [Attribute^="value" i] /** Example: */ img[class^="top" i] { border: 2px solid green; padding:3px; }
<h1 class="top">CSS Tutorial</h1> <!-- OK --> <h1 class="Top">CSS Tutorial</h1> <!-- OK --> <p class="top-text">CSS Selector Tutorial</p> <!-- OK --> <p class="TOP-text">CSS Selector Tutorial</p> <!-- OK --> <p class="topcontent">....</p> <!-- OK --> <p class="footer top">....</p>
CSS [Attribute$="value"] Selector wird benutzt um die Element zu finden, in dem der Wert vom Attribut mit einem vorgegebenen Wert endet. Dieser Selector ist Case-sensitive.
Z.B Suchen Sie die Elementen <a> , in dem der Wert vom Attribut HREF mit ".html" endet.
[href^=".html"] | |
href | OK? |
http://abc.com/java-tutorial.html | ![]() |
http://abc.com/java-tutorial.Html | |
http://abc.com/java-tutorial.html#chapter1 | |
http://cde.com/css.jsp |
attr-selector-example9.css
a[href$=".html"] { color: red; font-weight: bold; }
attr-selector-example9.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS [Attribute$="value"] Selector</title> <link rel="stylesheet" type="text/css" href="attr-selector-example9.css" /> </head> <body> <h3>CSS [Attribute$="value"] Selector</h3> <p>a[href$=".html"]</p> <ul> <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li> <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li> <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li> <li><a href="http://other.com/tutorial">Other Tutorial</a></li> </ul> <p><b>Note:</b> For [<i>attribute</i>$=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body> </html>
Wenn Sie möchten, CSS [Attribute$="value"] Selector ist Case-insensitive, können Sie die Syntax von CSS4 benutzen:
/** Syntax: */ [Attribute$="value" i] /** Example: */ img[href$="html" i] { color:red; font-weight: bold; }
<ul> <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li> <!-- OK --> <li><a href="http://abc.com/java-tutorial.Html">Java Tutorial</a></li> <!-- OK --> <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li> <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li> <li><a href="http://other.com/tutorial">Other Tutorial</a></li> </ul>
CSS [Attribute*="value"] Selector wird benutzt um die Elementen zu finden, in dem der Wert vom Attribut einen vorgegebenen Wert enthaltet. Dieser Selector ist Case-insensitive.
Z.B Suchen Sie alle Elementen <a> mit dem Attribut HREF, das ".html" enthaltet.
[href*=".html"] | |
href | OK? |
http://abc.com/java-tutorial.html | ![]() |
http://abc.com/java-tutorial.Html | |
http://abc.com/java-tutorial.html#chapter1 | ![]() |
http://cde.com/css.jsp |
attr-selector-example11.css
a[href*=".html"] { color: red; font-weight: bold; }
attr-selector-example11.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS [Attribute*="value"] Selector</title> <link rel="stylesheet" type="text/css" href="attr-selector-example11.css" /> </head> <body> <h3>CSS [Attribute*="value"] Selector</h3> <p>a[href*=".html"]</p> <ul> <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li> <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li> <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li> <li><a href="http://other.com/tutorial">Other Tutorial</a></li> </ul> <p><b>Note:</b> For [<i>attribute</i>*=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body> </html>
Wenn Sie möchten,CSS [Attribute*="value"] Selector ist nicht Case-insensitive , können Sie die Syntax CSS4 benutzen:
/** Syntax: */ [Attribute*="value" i] /** Example: */ img[href*="html" i] { color:red; font-weight: bold; }
<ul> <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li> <!-- OK --> <li><a href="http://abc.com/java-tutorial.Html">Java Tutorial</a></li> <!-- OK --> <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li> <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li> <li><a href="http://other.com/tutorial">Other Tutorial</a></li> </ul>