CSS - 属性选择器

上一页
下一页

描述

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

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

CSS [attribute] 选择器

此选择器选择具有指定属性的元素，而不管其值如何。

语法

[attribute]

示例

以下是一个选择所有具有“data-toggle”属性的 HTML 元素的示例

Open Compiler
<html>
<head>
<style>
   [data-toggle] {
      background: yellow;
      color: red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute] Selector</h2>
   <div data-toggle="yes">The div with data-toggle attribute</div>
   <div>The div without data-toggle attribute</div>
   <p data-toggle="no">A paragraph with data-toggle attribute</p>
   <p>A paragraph without data-toggle attribute</p>

</body>
</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS [attribute="value"] 选择器

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

语法

[attribute="value"]

示例

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

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

   <div data-toggle="yes">The div with data-toggle attribute</div>
   <div>The div without data-toggle attribute</div>
   <p data-toggle="no">A paragraph with data-toggle attribute</p>
   <p>A paragraph without data-toggle attribute</p>

</body>
</html>

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

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

语法

[attribute*="value"]

示例

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

Open Compiler
<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"]

示例

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

Open Compiler
<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://tutorialspoint.com">HTTPS Link</a></p>
   <p><a href="https://tutorialspoint.com">HTTP Link</a></p>

</body>
</html>

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

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

语法

[attribute$="value"]

示例

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

Open Compiler
<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”开头，后跟连字符的元素

Open Compiler
<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"]

示例

此选择器选择所有具有“class”属性且包含“beautifyme”单词的元素

Open Compiler
<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。

这是一个示例 -

Open Compiler
<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>

输入的属性选择器

属性选择器可用于根据特定条件（例如其类型、名称、值或其他属性）选择输入元素。

这是一个示例 -

Open Compiler
<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>

标题的属性选择器

要根据title 属性对元素进行样式设置，您可以使用 CSS 属性选择器 title 来设置具有包含特定值的 title 属性的元素的样式。

这是一个示例 -

Open Compiler
<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">A text refers to a piece of written or printed information in the form of words or characters.</span>
   <span title="CSS Background">You can set backgrounds of various HTML elements.</span>
   <span title="CSS Border"> border property is used to create a border around an element.</span>
   <span title="Margin">Setting up a margin around an HTML element.</span>
   <span title="Height">The height property sets the height of an element's content area.</span>
   <span title="CSS Width">The width sets the width of an element's content area.</span>
</body>
</html>

语言的属性选择器

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

这是一个示例 -

Open Compiler
<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 多个属性选择器允许您根据多个属性值选择元素。它用于定位满足多个条件的特定元素。

这是一个示例 -

Open Compiler
<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> -

Open Compiler
<html>
<head>
<style>
   h2 + p { 
      font-weight: bold;
      color:blue;
   }
   h2 ~ div {
      color: red;
   }
</style>
</head>
<body>
   <h2>CSS Background</h2>  
   <p>You can set backgrounds of various HTML elements.</p>
   <div>
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
   </div>
   <p>There are many variations of passages of Lorem Ipsum available.</p>
</body>
</html>
打印页面
上一页
下一页
广告