说明
CSS 属性选择器允许您根据一个或多个属性的存在或值来选择 HTML 元素。它们是定位 HTML 标记中特定元素的强大方法。属性选择器用方括号 [] 括起来，可以采用多种形式。
以下部分讨论使用属性选择器的一些常见方法:
CSS [属性]选择器
此选择器选择具有指定属性的元素，无论其值如何。
语法
[attribute] 示例
以下是选择所有 HTML 的示例具有"data-toggle"属性的元素
<html>
<head>
<style>
[data-toggle] {
background: yellow;
color: red;
}
</style>
</head>
<body>
<h2>CSS [属性]选择器</h2>
<div data-toggle="yes">具有 data-toggle 属性的 div</div>
<div>没有 data-toggle 属性的 div</div>
<p data-toggle="no">带有 data-toggle 属性的段落</p>
<p>没有 data-toggle 属性的段落</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">具有 data-toggle 属性的 div</div>
<div>没有 data-toggle 属性的 div</div>
<p data-toggle="no">带有 data-toggle 属性的段落</p>
<p>没有 data-toggle 属性的段落</p>
</body>
</html> CSS [attribute*="value"] 选择器
此选择器选择具有特定属性且值包含特定子字符串的元素。
语法
[attribute*="value"] 示例
此选择器选择路径中包含"images"且具有"src"属性的所有元素:
<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.yxjc123.com">HTTPS Link</a></p>
<p><a href="http://www.yxjc123.com">HTTP Link</a></p>
</body>
</html> CSS [attribute$="value"] 选择器
此选择器选择具有以下属性的元素:具有以特定字符串结尾的值的特定属性。
语法
[attribute$="value"] 示例
此选择器选择具有以"src"属性结尾的所有元素".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"] 选择器
此选择器选择具有特定属性的元素，该属性的值以指定子字符串开头，后跟连字符 (-)。此选择器通常用于选择具有特定于语言的属性的元素，例如 lang 属性，这些属性通常使用连字符来表示语言子代码。
语法
[attribute|="value"] 示例
此选择器选择所有具有"lang"属性且以"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 français!</div>
<div lang="es">Hola Mundo en español!</div>
</body>
</html> CSS [attribute~="value"] 选择器
此选择器用于选择具有特定属性且值包含指定单词的元素。该单词应该是一个独立的单词，由空格包围或位于属性值的开头或结尾。
语法
[attribute~="value"] 示例
此选择器选择全部具有包含单词"beautifyme"的"class"属性的元素
<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 属性设置样式，href 属性是 <a> 元素上使用的常见属性指定链接指向的 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> 输入的属性选择器
属性选择器可用于选择输入元素基于特定标准，例如它们的类型、名称、值或其他属性。
这里是一个示例 -
<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> 标题的属性选择器
To基于 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">文本是指以文字或字符形式书写或印刷的信息。</span>
<span title="CSS Background">您可以设置各种HTML元素的背景。</span>
<span title="CSS Border"> border 属性用于在元素周围创建边框。</span>
<span title="Margin">设置 HTML 元素周围的边距。</span>
<span title="Height">height 属性设置元素内容区域的高度。</span>
<span title="CSS Width">宽度设置元素内容区域的宽度。</span>
</body>
</html> Attribute语言选择器
您可以使用 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;
}
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>您可以设置各种 HTML 元素的背景。</p>
<div>
<p>无论何事，只要对它有无限的热情你就能取得成功。</p>
</div>
<p>A man can succeed at almost anything for which he has unlimited enthusiasm.</p>
</body>
</html>