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 文章。
