CSS - 属性选择器
描述
CSS 属性选择器允许您根据一个或多个属性的存在或值来选择 HTML 元素。这是针对 HTML 标记中特定元素的一种强大方式。属性选择器用方括号 [] 包围，并可以采用多种形式。
以下部分讨论了一些使用属性选择器的常见方法：
CSS [attribute] 选择器
此选择器选择具有指定 attribute 的元素，而不考虑其值。
语法
[attribute]
示例
以下示例选择所有具有 "data-toggle" 属性的 HTML 元素
<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"] 选择器
此选择器选择具有特定属性且值为特定值的元素。
语法
[attribute="value"]
示例
此选择器选择所有具有 'data-toggle' 属性且值为 '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"] 选择器
此选择器选择具有特定属性且值包含特定子字符串的元素。
语法
[attribute*="value"]
示例
此选择器选择所有具有 "src" 属性且路径中包含 "images" 的元素：
<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"]
示例
此选择器选择所有具有以 "https://" 开头的 "href" 属性的元素
<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.example.com">HTTPS Link</a></p>
<p><a href="https://www.example.com">HTTP Link</a></p>
</body>
</html>
CSS [attribute$="value"] 选择器
此选择器选择具有特定属性且值以特定字符串结尾的元素。
语法
[attribute$="value"]
示例
此选择器选择所有具有以 ".png" 结尾的 "src" 属性的元素
<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"] 选择器
此选择器选择具有特定 attribute，其值以指定的子字符串开头并后跟连字符（-）的元素。此选择器常用于选择具有语言特定属性的元素，例如 lang 属性，这些属性通常使用连字符表示语言子代码。
语法
[attribute|="value"]
示例
此选择器选择所有具有 "lang" attribute 以 "en" 开头并后跟连字符的元素：
<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 franais!</div>
<div lang="es">Hola Mundo en espaol!</div>
</body>
</html>
CSS [attribute~="value"] 选择器
此选择器用于选择具有特定 attribute，其值包含指定单词的元素。该单词应为独立单词，由空格包围，或位于 attribute 值的开头或结尾。
语法
[attribute~="value"]
示例
此选择器选择所有具有 "class" attribute 包含单词 "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 链接的 Attribute Selectors
您可以根据元素的 href attribute 进行样式设置，这是 <a> 元素上常用的 attribute，用于指定链接指向的 URL。
以下是一个示例 −
<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>
用于 input 的属性选择器
属性选择器可以根据特定条件（如 type、name、value 或其他属性）来选择 input 元素。
以下是一个示例 −
<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 的属性选择器
要基于 title 属性来样式化元素，可以使用 CSS 属性选择器 title 来样式化那些 title 属性包含特定值的元素。
以下是一个示例 −
<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 属性指定元素内包含文本的语言。
以下是一个示例 −
<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 franais!</div>
<div lang="es">Hola Mundo en espaol!</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;
}
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> −
<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>