Die Anleitung zu CSS Attribute Selector

CSS Attribute Selector
CSS [Attribute] Selector
CSS [Attribute='value'] Selector
CSS [Attribute~='value'] Selector
CSS [Attribute|='value'] Selector
CSS [Attribute^='value'] Selector
CSS [Attribute$='value'] Selector
CSS [Attribute*='value'] Selector

1. CSS Attribute Selector

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:

Die Anleitung zu Grundlegende CSS Selectors

2. CSS [Attribute] Selector

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>

3. CSS [Attribute='value'] Selector

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>

4. CSS [Attribute~='value'] Selector

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" />

5. CSS [Attribute|='value'] Selector

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>

6. CSS [Attribute^='value'] Selector

CSS [Attribute^="value"] Selector wird benutzt ụ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>

7. CSS [Attribute$='value'] Selector

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>

8. CSS [Attribute*='value'] Selector

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>

No ADS