CSS - 属性选择器_CSS 菜鸟教程

CSS 属性选择器（ attribute selectors ）用于选择具有特定属性或属性值的 HTML 元素。属性选择器括在方括号 [ ] 中，可以采用多种形式。

如下所示，你可以看到如何根据 CSS 中的属性选择 HTML 元素。

/* 选择所有具有目标属性的锚点标签 */
a[target] {
	 	 color: green;
}

Attribute selector 是 CSS 中的选择器类型。要了解 CSS 中的所有选择器，请查看 CSS 选择器文章。

CSS [attribute] 选择器

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

语法

[attribute]{
	 	 property: value;
}

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

例

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

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 [data-toggle] {
	 	 	 	 	 	 background: lightgray;
	 	 	 	 	 	 padding: 10px;
	 	 	 	 	 	 color: black;
	 	 	 	 }
	 	 </style>
</head>

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

</html>

CSS [attribute=“value”] 选择器

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

语法

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

例

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

<!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” 的元素：

<!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;
}

例

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

<html>

<head>
	 	 <style>
	 	 	 	 [href^="https"] {
	 	 	 	 	 	 background: lightgray;
	 	 	 	 	 	 color:black;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <a href="https://www.qikepu.com">HTTPS Link</a>	
	 	 <br> <br>
	 	 <a href="http://www.qikepu.com">HTTP Link</a>
</body>

</html>

CSS [attribute$=“value”] 选择器

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

语法

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

例

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

<!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;
}

例

此选择器选择所有具有 “lang” 属性的元素，该属性以 “en” 开头，后跟连字符：

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

例

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

<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 属性选择器

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

例

<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 属性指定元素中包含的文本的语言。

例

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

	 	 /* 使用href属性定位所有锚点元素 */
	 	 a[href] {
	 	 	 	 color: rgb(231, 11, 194);
	 	 }

	 	 /* 同时具有特定href值和文件扩展名的目标锚点元素 */
	 	 a[href="css_backgrounds.htm"][href$=".htm"] {
	 	 	 	 background-color: lightgray;
	 	 	 	 padding: 5px;
	 	 }

	 	 /* 使用特定href值定位锚点元素 */
	 	 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 Slectors 文章。

<< CSS 数据类型 - generic-family CSS 函数 - element () >>