codestory

Die Anleitung zu CSS Attribute Selector

View more Tutorials:

  1. CSS Attribute Selector
  2. CSS [Attribute] Selector
  3. CSS [Attribute='value'] Selector
  4. CSS [Attribute~='value'] Selector
  5. CSS [Attribute|='value'] Selector
  6. CSS [Attribute^='value'] Selector
  7. CSS [Attribute$='value'] Selector
  8. 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:

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 16x16
_Blank 16x16
_BLANK 16x16
_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 16x16
A Black Cat  
A Black cat(2)  
A Black cat-3  
A White Cat  
Tiger (Belong to the cat family) 16x16
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 16x16
Top  
top-text 16x16
top-content 16x16
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 ụ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 16x16
Top  
top-text 16x16
top-content 16x16
topcontent 16x16
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 16x16
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 16x16
http://abc.com/java-tutorial.Html  
http://abc.com/java-tutorial.html#chapter1 16x16
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>

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.