CSS - 属性选择器：释放精准样式的力量
你好，未来的CSS魔法师们！今天，我们将深入CSS属性选择器的神奇世界。系好安全带，因为我们即将踏上一次将彻底改变你网页样式方式的旅程。作为你友好的邻居电脑老师，我将在这次冒险中为你提供大量的示例、解释，也许还有一两个父亲的笑话。让我们开始吧！
描述
在我们跳入深水区之前，让我们先了解一下属性选择器是什么，以及它们为什么这么棒。想象你在一个大派对上（HTML文档），你想找到所有穿红鞋的人（具有特定属性的元素）。属性选择器就像你的私人派对侦探，帮助你精确地找到你想要的目标，而不会打扰到整个人群。
在CSS中，属性选择器允许我们根据HTML元素的属性或属性值来定位元素。这给了我们在样式设计上极大的灵活性和精确性，而无需额外的类或ID。这就像为你的CSS配备了一把瑞士军刀——多功能、精确且非常方便！
现在，让我们探索不同类型的属性选择器，好吗？
CSS [attribute] 选择器
最基础的属性选择器是 [attribute] 选择器。它定位任何具有指定属性的元素，不论其值是什么。
<a href="https://www.example.com">点击我！</a>
<a>我只是文本</a>
<style>
[href] {
color: blue;
text-decoration: none;
}
</style>在这个示例中，只有第一个链接会变成蓝色并去掉下划线，因为它有 href 属性。第二个 <a> 标签将保持不变。这就像找到所有带有名牌的派对参与者，而不关心他们的名字是什么！
CSS [attribute="value"] 选择器
当你想要更具体时，[attribute="value"] 选择器就会派上用场。它定位属性值与指定值完全匹配的元素。
<input type="text" placeholder="输入你的名字">
<input type="password" placeholder="输入你的密码">
<style>
[type="password"] {
border: 2px solid red;
}
</style>在这里，只有密码输入框会得到一个红色边框。这就像找到所有带有金色手环的VIP派对参与者！
CSS [attribute*="value"] 选择器
[attribute*="value"] 选择器就像一条猎犬——它能够嗅出任何属性值中包含指定子字符串的元素，无论它在何处。
<p title="我喜欢CSS">段落1</p>
<p title="HTML很酷">段落2</p>
<p title="JavaScript很棒">段落3</p>
<style>
[title*="CSS"] {
font-weight: bold;
}
</style>在这种情况下，只有“段落1”会变成粗体，因为它的标题包含“CSS”。这就像找到派对上任何名字中包含“Smith”的人，无论是John Smith、Smithson还是Blacksmith！
CSS [attribute^="value"] 选择器
[attribute^="value"] 选择器很挑剔——它只选择属性值以指定值开头的元素。
<a href="https://www.example.com">HTTPS链接</a>
<a href="http://www.example.com">HTTP链接</a>
<style>
[href^="https"] {
color: green;
}
</style>只有HTTPS链接会变成绿色。这就像找到所有名字以“A”开头的派对参与者！
CSS [attribute$="value"] 选择器
另一方面，[attribute$="value"] 选择器定位属性值以指定值结尾的元素。
<a href="document.pdf">PDF文档</a>
<a href="image.jpg">JPG图片</a>
<style>
[href$=".pdf"] {
background-color: yellow;
}
</style>PDF链接会得到一个黄色背景。这就像找到所有姓氏以“son”结尾的派对参与者！
CSS [attribute|="value"] 选择器
[attribute|="value"] 选择器有点特别。它选择属性值正好是“value”或者以“value”开头紧接着一个连字符的元素。
<p lang="en">英语</p>
<p lang="en-US">美式英语</p>
<p lang="fr">法语</p>
<style>
[lang|="en"] {
font-style: italic;
}
</style>“英语”和“美式英语”都会变成斜体。这对于语言特定的样式非常完美！
CSS [attribute~="value"] 选择器
[attribute~="value"] 选择器定位属性值包含指定单词，且前后有空格的元素。
<p class="fruit apple">苹果</p>
<p class="fruit orange">橙子</p>
<p class="vegetable carrot">胡萝卜</p>
<style>
[class~="fruit"] {
color: purple;
}
</style>“苹果”和“橙子”都会变成紫色。这就像找到所有把“舞者”作为爱好之一的派对参与者！
针对href链接的属性选择器
属性选择器对于根据链接目标来设置链接样式特别有用：
<a href="https://www.example.com">外部链接</a>
<a href="/internal-page">内部链接</a>
<a href="document.pdf">PDF文档</a>
<style>
a[href^="https"] {
color: green;
}
a[href^="/"] {
color: blue;
}
a[href$=".pdf"] {
color: red;
}
</style>这段代码为外部链接、内部链接和PDF链接设置了不同的颜色。
针对输入框的属性选择器
属性选择器在处理表单输入时大放异彩：
<input type="text" required>
<input type="email">
<input type="checkbox" checked>
<style>
input[required] {
border: 2px solid red;
}
input[type="email"] {
background-color: lightblue;
}
input[checked] {
outline: 2px solid green;
}
</style>这种样式使得必填字段突出显示，为电子邮件输入设置浅蓝色背景，并突出显示勾选的复选框。
针对标题的属性选择器
我们可以使用属性选择器根据元素的标题属性来设置样式：
<div title="重要">这是重要的</div>
<div title="阅读更多">点击展开</div>
<style>
[title="重要"] {
font-weight: bold;
color: red;
}
[title*="更多"] {
cursor: pointer;
text-decoration: underline;
}
</style>这使得重要内容突出显示，并指示可点击的元素。
针对语言的属性选择器
使用属性选择器进行语言特定的样式设计非常简单：
<p lang="en">你好，世界！</p>
<p lang="es">¡Hola, Mundo!</p>
<p lang="fr">Bonjour, le Monde!</p>
<style>
[lang="en"] {
font-family: 'Arial', sans-serif;
}
[lang="es"] {
font-style: italic;
}
[lang="fr"] {
font-weight: bold;
}
</style>这会对不同语言的内容应用不同的样式。
CSS 多重属性选择器
你可以组合多个属性选择器以实现更精确的定位：
<a href="https://www.example.com" target="_blank" rel="noopener">安全外部链接</a>
<a href="https://www.example.com">普通外部链接</a>
<style>
a[href^="https"][target="_blank"] {
color: green;
text-decoration: none;
}
</style>这段代码仅对外部链接在新标签页打开的链接进行样式设置。
CSS 属性选择器与兄弟组合器
属性选择器可以与其他选择器组合，用于高级样式设计：
<label for="name">名字：</label>
<input id="name" type="text" required>
<span class="error">请输入你的名字</span>
<style>
input[required] + span.error {
display: none;
color: red;
}
input[required]:invalid + span.error {
display: inline;
}
</style>这会在必填字段无效时，在其旁边显示错误消息。
至此，亲爱的朋友们！关于CSS属性选择器的全面指南。记住，熟能生巧，所以不要害怕在你的项目中尝试这些选择器。它们就像秘密成分，可以让你的CSS从优秀变得卓越！
在我们结束之前，这里有一个方便的表格，总结了我们所涵盖的所有属性选择器：
| 选择器 | 示例 | 描述 |
|---|---|---|
| [attribute] | [href] | 选择具有指定属性的元素 |
| [attribute="value"] | [type="text"] | 选择具有指定属性和值的元素 |
| [attribute*="value"] | [title*="hello"] | 选择属性值包含指定值的元素 |
| [attribute^="value"] | [href^="https"] | 选择属性值以指定值开头的元素 |
| [attribute$="value"] | [href$=".pdf"] | 选择属性值以指定值结尾的元素 |
| [attribute | ="value"] | [lang |
| [attribute~="value"] | [class~="highlight"] | 选择属性值包含指定单词的元素 |
快乐编码，愿选择器与你同在！
Credits: Image by storyset