Css 简明教程

CSS - Atrribute Selector Property

Description

使用 CSS 属性选择器,你可以根据一个或多个属性的存在或值来选择 HTML 元素。它们是针对 HTML 标记中特定元素的强大方式。属性选择器用方括号 [] 括起来,并且可以采用各种形式。

CSS attribute selectors allow you to select HTML elements based on the presence or value of one or more attributes. They are a powerful way to target specific elements in your HTML markup. Attribute selectors are enclosed in square brackets [] and can take various forms.

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

The following sections discusses some common ways to use attribute selectors:

CSS [attribute] Selector

此选择器会选择有指定属性的元素,而无论其值为何。

This selector selects elements that have specified attribute, regardless of its value.

Syntax

[attribute]

Example

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

Following is an example to select all the HTML elements with a "data-toggle" attribute

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

CSS [attribute="value"] Selector

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

This selector selects elements that have a specific attribute with a specific value.

Syntax

[attribute="value"]

Example

此选择器选择所有带有‘data-toggle’属性且其值为‘yes’的元素。

This selector selects all elements with a 'data-toggle' attribute whose value is set to 'yes'.

<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"] Selector

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

This selector selects elements that have a specific attribute with a value containing a specific substring.

Syntax

[attribute*="value"]

Example

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

This selector selects all the elements with a "src" attribute which contain a "images" in the path:

<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"] Selector

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

This selector selects elements that have a specific attribute with a value that starts with a specific string.

Syntax

[attribute^="value"]

Example

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

This selector selects all elements with a "href" attribute starting with "https://"

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

</body>
</html>

CSS [attribute$="value"] Selector

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

This selector selects elements that have a specific attribute with a value that ends with a specific string.

Syntax

[attribute$="value"]

Example

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

This selector selects all elements with a "src" attribute which ends with ".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"] Selector

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

This selector select elements that have a specific attribute with a value that begins with a specified substring followed by a hyphen (-). This selector is often used for selecting elements with language-specific attributes, such as lang attributes, which often use hyphens to denote language subcodes.

Syntax

[attribute|="value"]

Example

此选择器选择所有以“en”开头的“lang”属性,后跟连字符:

This selector selects all the elements with a "lang" attribute that starts with "en" followed by a hyphen:

<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"] Selector

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

This selector is used to select elements that have a specific attribute with a value containing a specified word. The word should be a standalone word, surrounded by spaces or at the beginning or end of the attribute value.

Syntax

[attribute~="value"]

Example

此选择器选择所有带有 “beautifyme”单词的 “class”属性的元素

This selector select all elements with a "class" attribute containing the word "beautifyme"

<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 属性是 <a> 元素上用于指定链接指向的 URL 的一个常见属性。

You can style elements based on their href attribute is a common attribute used on <a> elements to specify the URL that the link points to.

示例如下:

Here is an example −

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

Attribute Selectors For Inputs

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

Attribute selectors can be used to select input elements based on specific criteria, such as their type, name, value, or other attributes.

示例如下:

Here is an example −

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

Attribute Selectors For Title

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

To style elements based on the title attribute, you can use the CSS attribute selector title to style elements that have a title attribute containing a specific value.

示例如下:

Here is an example −

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

Attribute Selectors For Language

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

You can use the lang attribute to select elements based on their language. The lang attribute specifies the language of the text contained within an element.

示例如下:

Here is an example −

<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 Multiple Attribute Selectors

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

CSS multiple attribute selectors allow you to select elements based on multiple attribute values. It is use to target specific element that meet multiple criteria.

示例如下:

Here is an example −

<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 Attribute Selectors With Sibling Combinator

可以共同使用 CSS 属性选择器和同级组合子,基于属性及其与其他元素的关系来选择特定元素。

CSS attribute selectors and sibling combinators can be used together to select specific elements based on their attributes and their relationship to other elements.

  1. General sibling combinator (~) − This combinator selects all sibling elements that follow a specified element, but are not directly adjacent to it. Syntax selector1 ~ selector2 { /* CSS styles */ }

  2. Adjacent sibling combinator (+) − This combinator selects the element that is directly after the specified element. Syntax selector1 + selector2 { /* CSS styles */ }

以下示例表明,相邻同级组合子 (+) 会选择紧跟标题之后的段落,而一般同级组合子 (~) 会选择标题之后的 <div> −

The following example demonstrates that the adjacent sibling combinator (+) selects the paragraph immediately after the heading, while the general sibling combinator (~) selects <div> after the heading −

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