说明

CSS 属性选择器允许您根据一个或多个属性的存在或值来选择 HTML 元素。它们是定位 HTML 标记中特定元素的强大方法。属性选择器用方括号 [] 括起来,可以采用多种形式。

以下部分讨论使用属性选择器的一些常见方法:

CSS [属性]选择器

此选择器选择具有指定属性的元素,无论其值如何。

语法

[attribute] 

示例

以下是选择所有 HTML 的示例具有"data-toggle"属性的元素

<html>
<head>
<style>
   [data-toggle] {
      background: yellow;
      color: red;
   }
</style>
</head>
<body>
   <h2>CSS [属性]选择器</h2>
  <div data-toggle="yes">具有 data-toggle 属性的 div</div>
  <div>没有 data-toggle 属性的 div</div>
  <p data-toggle="no">带有 data-toggle 属性的段落</p>
  <p>没有 data-toggle 属性的段落</p>
</body>
</html> 

CSS [attribute="value"] 选择器

此选择器选择具有特定值的特定属性的元素。

语法

[attribute="value"] 

示例

此选择器选择所有具有"data-toggle"属性且其值设置为"yes"的元素。

<html>
<head>
<style>
   [data-toggle="yes"] {
      background: yellow;
      color: red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute="value"] Selector</h2>

      <div data-toggle="yes">具有 data-toggle 属性的 div</div>
    <div>没有 data-toggle 属性的 div</div>
    <p data-toggle="no">带有 data-toggle 属性的段落</p>
    <p>没有 data-toggle 属性的段落</p>


</body>
</html> 

CSS [attribute*="value"] 选择器

此选择器选择具有特定属性且值包含特定子字符串的元素。

语法

[attribute*="value"] 

示例

此选择器选择路径中包含"images"且具有"src"属性的所有元素:

<html>
<head>
<style>
   [src*="images"] {
      border: 2px dashed red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute*="value"] Selector</h2>

   <img alt="Logo" src = "/css/images/logo.png" />

</body>
</html> 

CSS [attribute^="value"] 选择器

此选择器选择具有特定属性且值以特定字符串开头的元素。

语法

[attribute^="value"] 

示例

此选择器选择具有以"https://"开头的"href"属性的所有元素

<html>
<head>
<style>
   [href^="https"] {
      background: yellow;
      text-decoration:none;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute^="value"] Selector</h2>

   <p><a href="https://www.yxjc123.com">HTTPS Link</a></p>
   <p><a href="http://www.yxjc123.com">HTTP Link</a></p>

</body>
</html> 

CSS [attribute$="value"] 选择器

此选择器选择具有以下属性的元素:具有以特定字符串结尾的值的特定属性。

语法

[attribute$="value"] 

示例

此选择器选择具有以"src"属性结尾的所有元素".png"

<html>
<head>
<style>
   [src$=".png"] {
      border: 2px dashed red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute$="value"] Selector</h2>

   <img alt="Logo" src = "/css/images/logo.png" />

</body>
</html> 

CSS [attribute|="value"] 选择器

此选择器选择具有特定属性的元素,该属性的值以指定子字符串开头,后跟连字符 (-)。此选择器通常用于选择具有特定于语言的属性的元素,例如 lang 属性,这些属性通常使用连字符来表示语言子代码。

语法

[attribute|="value"] 

示例

此选择器选择所有具有"lang"属性且以"en"开头后跟连字符的元素:

<html>
<head>
<style>
   [lang|="en"] {
      border: 2px dashed red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute|="value"] Selector</h2>
   <div lang="en">Hello World in English!</div>
   <div lang="fr">Bonjour tout le monde en français!</div>
   <div lang="es">Hola Mundo en español!</div>
</body>
</html> 

CSS [attribute~="value"] 选择器

此选择器用于选择具有特定属性且值包含指定单词的元素。该单词应该是一个独立的单词,由空格包围或位于属性值的开头或结尾。

语法

[attribute~="value"] 

示例

此选择器选择全部具有包含单词"beautifyme"的"class"属性的元素

<html>
<head>
<style>
   [class~="beautifyme"] {
   background-color:lightblue;
   border:2px solid red;
      }
</style>
</head>
<body>
   <h2>CSS [attribute|="value"] Selector</h2>
   <div class="beautifyme">div with <b>beautifyme</b> class</div>
   <div class="beautifyme1">div with <b>beautifyme1</b> class</div>
   <div class="beautifyme-2">div with <b>beautifyme-2</b> class</div>
</body>
</html> 

href 链接的属性选择器

您可以根据元素的 href 属性设置样式,href 属性是 <a> 元素上使用的常见属性指定链接指向的 URL。

这是一个示例 -

<html>
<head>
<style>
      ul {
      list-style: none;
   }
   a[href] {
      color: rgb(11, 11, 231);
   }
   a[href="css_backgrounds.htm"] {
      color: rgb(224, 152, 18);
   }
   a[href~="css_colors.htm"] {
      color: rgb(51, 255, 0);
   }
   a[href|="css_padding.htm"] {
      color: rgb(0, 255, 255);
   }
   a[href^="css_margins.htm"] {
      color: rgb(255, 0, 55);
   }
   a[href$="css_lists.htm"] {
      color: rgb(255, 230, 0);
   }
   a[href*="css_borders.htm"] {
      color: rgb(112, 108, 108);
   }
</style>
</head>
<body>
   <ul>
      <li> <a href="css_text.htm">CSS Text</a></li>
      <li><a href=".htm">CSS Background</a></li>
      <li><a href="css_colors.htm">CSS Color</a></li>
      <li><a href="css_padding.htm">CSS Padding</a></li>
      <li><a href="css_margins.htm">CSS Margin</a></li>
      <li><a href="css_lists.htm">CSS List</a></li>
      <li><a href="css_borders.htm">CSS Borders</a></li>
   </ul> 
</body>
</html> 

输入的属性选择器

属性选择器可用于选择输入元素基于特定标准,例如它们的类型、名称、值或其他属性。

这里是一个示例 -

<html>
<head>
<style>
   input {
      display: block;
      margin: 10px;
   }
   input[type] {
      border: 1px solid #e0dd29;
   }
   input[placeholder="Password"] {
      border: 1px solid #f00;
   }
   input[name|="emailid"] {
      background-color: rgb(236, 178, 233);
   }
   input[type~="submit"] {
      background-color: rgb(88, 241, 88);
      padding: 10px;
   }
   input[value^="But"] {
      background-color: rgb(236, 149, 68);
      padding: 10px;
   }
   input[type$="box"] {
      border-radius: 5px; 
      height: 50px;
      width: 20px;
   }
   input[type*="adi"] {
      height: 50px;
      width: 20px;
   }
</style>
</head>
<body>
   <input type="text" placeholder="Username">
   <input type="password" placeholder="Password">
   <input type="email" placeholder="Email" name="emailid">
   <input type="submit" placeholder="Submit">
   <input type="button" value="Button">
   <input type="checkbox" placeholder="Checkbox">
   <input type="radio" placeholder="Radio">
</body>
</html> 

标题的属性选择器

To基于 title 属性的样式元素,您可以使用 CSS 属性选择器 title 来设置具有包含特定值的 title 属性的元素的样式。

这里是一个示例 -

<html>
<head>
<style>
   span {
      display: block;
      margin: 10px;
      padding: 5px;
   }
   span[title] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(109, 177, 236);
   }
   span[title="CSS Background"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(250, 163, 192);
   }
   span[title|="CSS Border"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(245, 248, 79);
   }
   span[title^="Mar"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(255, 147, 23);
   }
   span[title$="ght"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(102, 201, 240);
   }
   span[title*="CSS Width"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(191, 14, 235);
   }
</style>
</head>
<body>
      <span title="CSS Text">文本是指以文字或字符形式书写或印刷的信息。</span>
    <span title="CSS Background">您可以设置各种HTML元素的背景。</span>
    <span title="CSS Border"> border 属性用于在元素周围创建边框。</span>
    <span title="Margin">设置 HTML 元素周围的边距。</span>
    <span title="Height">height 属性设置元素内容区域的高度。</span>
    <span title="CSS Width">宽度设置元素内容区域的宽度。</span>
</body>
</html> 

Attribute语言选择器

您可以使用 lang 属性根据元素的语言来选择元素。 lang 属性指定元素中包含的文本的语言。

这里是一个示例 -

<html>
<head>
<style>
   div[lang] {
      color: red;
   }
   div[lang="fr"] {
      color: blue;
   }
   div[lang~="es"] {
      color: green;
   }
   div[lang|="de"] {
      color: orange;
   }
   div[lang^="it"] {
      color: purple;
   }
   div[lang$="ja"] {
      color: brown;
   }
   div[lang*="zh"] {
      color: teal;
   }
</style>
</head>
<body>
   <div lang="en">Hello World in English!</div>
   <div lang="fr">Bonjour tout le monde en français!</div>
   <div lang="es">Hola Mundo en español!</div>
   <div lang="ja">こんにちは、日本語で世界!</div>
   <div lang="de">Hallo Welt auf Deutsch!</div>
   <div lang="it">Ciao Mondo in italiano!</div>
   <div lang="zh">你好世界,中文!</div>
</body>
</html> 

CSS 多属性选择器

CSS 多属性选择器允许您可以根据多个属性值选择元素。它用于定位满足多个条件的特定元素。

这里是一个示例 -

<html>
<head>
<style>
   ul {
      list-style: none;
   }
   a[href] {
      color: rgb(231, 11, 194);
   }
   a[href="css_backgrounds.htm"][href$=".htm"] {
      color: rgb(224, 152, 18);
   }
   a[href="css_colors.htm"] {
      color: rgb(51, 255, 0);
   }
</style>
</head>
<body>
   <ul>
      <li><a href="css_text.htm">CSS Text</a></li>
      <li><a href="css_backgrounds.htm">CSS Background</a></li>
      <li><a href="css_colors.htm">CSS Color</a></li>
   </ul> 
</body>
</html> 

具有同级组合器的 CSS 属性选择器

CSS 属性选择器和同级组合器可以一起使用,根据其属性及其与其他元素的关系来选择特定元素。

  • 通用同级组合器 (~) - 此组合器选择所有同级跟随指定元素但不直接与其相邻的元素。

    语法

    selector1 ~ selector2 {
       /* CSS styles */
    } 
  • 相邻同级组合器 (+) - 此组合器选择元素

    语法

    selector1 + selector2 {
       /* CSS styles */
    } 

以下示例演示相邻同级组合符 (+) 选择紧接在标题,而一般同级组合器 (~) 选择标题后的 <div> -

<html>
<head>
<style>
   h2 + p { 
      font-weight: bold;
      color:blue;
   }
   h2 ~ div {
      color: red;
   }
</style>
</head>
<body>
   <h2>CSS Background</h2>  
   <p>您可以设置各种 HTML 元素的背景。</p>
   <div>
      <p>无论何事,只要对它有无限的热情你就能取得成功。</p>
   </div>
   <p>A man can succeed at almost anything for which he has unlimited enthusiasm.</p>
</body>
</html>