CSS - 属性选择器



CSS 属性选择器用于选择具有特定属性或属性值的HTML元素。属性选择器用方括号[ ]括起来,并且可以采用多种形式。

如下所示,您可以看到如何在CSS中根据属性选择HTML元素。

/* Selects all anchor tags having target attribute */ a[target] { color: green; }

属性选择器是CSS中的一种选择器类型。要了解CSS中的所有选择器,请查看CSS 选择器文章。

目录


 

CSS [attribute] 选择器

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

语法

[attribute]{ property: value; }

下面的示例使用了data-toggle属性,这是一个自定义数据属性,了解更多关于data-* 属性的信息。

示例

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

Open Compiler
<!DOCTYPE html> <html> <head> <style> [data-toggle] { background: lightgray; padding: 10px; color: black; } </style> </head> <body> <div data-toggle="yes"> The div with data-toggle="yes" attribute </div> <div> The div without data-toggle attribute </div> <p data-toggle="no"> A paragraph with data-toggle="no" 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"]{ property: value; }

示例

此选择器选择所有值为“yes”的'data-toggle'属性的元素。

Open Compiler
<!DOCTYPE html> <html> <head> <style> [data-toggle="yes"] { background: lightgray; padding: 10px; color: black; } </style> </head> <body> <div data-toggle="yes"> The div with data-toggle="yes" attribute </div> <div> The div without data-toggle attribute </div> <p data-toggle="no"> A paragraph with data-toggle="no" attribute </p> <p> A paragraph without data-toggle attribute </p> </body> </html>

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

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

语法

[attribute*="value"]{ property: value; }

示例

此选择器选择所有“src”属性中路径包含“css”的元素。

Open Compiler
<!DOCTYPE html> <html> <head> <style> img{ height: 50px; width: 150px; } [src*="css"] { border: 2px solid; } </style> </head> <body> <p> Style applied to src attribute containing string 'css' in it </p> <img alt="Logo" src = "/css/images/logo.png" /> <img alt="Logo" src = "/html/images/logo.png" /> </body> </html>

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

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

语法

[attribute^="value"]{ property: value; }

示例

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

Open Compiler
<html> <head> <style> [href^="https"] { background: lightgray; color:black; } </style> </head> <body> <a href="https://tutorialspoint.com">HTTPS Link</a> <br> <br> <a href="https://tutorialspoint.com">HTTP Link</a> </body> </html>

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

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

语法

[attribute$="value"]{ property: value; }

示例

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

Open Compiler
<!DOCTYPE html> <html> <head> <style> img{ height: 50px; width: 150px; } [src$=".png"] { border: 2px solid; } </style> </head> <body> <p> Style applied to src attribute's value ends with '.png' </p> <img alt="Logo" src = "/images/logo.jpg" /> <img alt="Logo" src = "/html/images/logo.png" /> </body> </html>

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

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

语法

[attribute|="value"]{ property: value; }

示例

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

Open Compiler
<html> <head> <style> [lang|="en"] { background: lightgray; padding: 10px; color: black; } </style> </head> <body> <div lang="en"> This is a div in English! </div> <p lang="en-US"> This paragraph is in American English. </p> <p lang="en-GB"> This paragraph is in British English. </p> <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"]{ property: value; }

示例

此选择器选择所有“class”属性包含“highlight”单词的元素。

Open Compiler
<html> <head> <style> [class~="highlight"] { background: yellow; padding: 10px; color: black; } </style> </head> <body> <div class="highlight"> This is a highlighted div! </div> <p class="highlight special"> This paragraph is highlighted and special. </p> <p class="special"> This paragraph is special but not highlighted. </p> <div class="note"> This is just a note. </div> <div class="highlight note"> This note is highlighted. </div> </body> </html>

输入的属性选择器

属性选择器可以用来根据特定条件(例如它们的类型、名称、值或其他属性)选择input元素。

示例

Open Compiler
<html> <head> <style> /* Applies to all input tags */ input { display: block; margin: 10px; padding: 5px; } /* Applies to input tags with type attribute */ input[type] { border: 1px solid gray; } /* Applies to input tag with placeholder value as name */ input[placeholder="name"] { border: 1px solid #f00; } /* Applies to input tags name attribute value start with "emailid" */ input[name|="emailid"] { background-color: rgb(236, 178, 233); } /* Applies to input type attributes value containing "sub" string in it */ input[type~="sub"] { background-color: rgb(88, 241, 88); padding: 10px; } </style> </head> <body> <input type="text" placeholder="Username"> <input type="text" placeholder="name"> <input type="email" placeholder="Email" name="emailid"> <input type="submit" placeholder="Submit"> </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> /* Remove bullet points from list items */ ul { list-style: none; } /* Target all anchor elements with an href attribute */ a[href] { color: rgb(231, 11, 194); } /* Target anchor elements with both specific href values and file extension */ a[href="css_backgrounds.htm"][href$=".htm"] { background-color: lightgray; padding: 5px; } /* Target anchor elements with a specific href value */ 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 选择器文章。
广告