说明
通过元素的属性，选择所有匹配的元素
应用场景
不用给标签指定 id、class类样式
语法
[attribute]： 匹配包含指定属性的元素。
例子：div[id]获取所有具有id值的div对象。[attribute=value]：匹配给定的属性是某个特定值的元素。
例子：input[name='userName']获取name取值为userName的输入框。[attribute~=value]：匹配带有以 attribute 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
例子：a[class~="logo"]获取存在class属性并且属性值包含单词logo的<a>元素[attribute^=value]：匹配给定的属性是以某些值开始的元素
例子：input[name^='news']获取name取值以news开头的输入框[attribute$=value]：匹配给定的属性是以某些值结尾的元素。
例子：input[name$='end']获取name取值以end结尾的输入框。[attribute*=value]:匹配给定的属性是以包含某些值的元素。
例子：input[name*='con']获取name取值包含con的输入框。[attribute|=value]：表示带有以 attribute 命名的属性的元素，属性值为value或是以value-为开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN、zh-TW 可以用 zh 作为 value）。
例子：div[lang|="zh"]将所有语言为中文的<div>元素的文本颜色设为红色，无论是简体中文（zh-CN）还是繁体中文（zh-TW）
简单例子
选中性别男时，显示蓝色圆点
选中性别女时，显示粉色圆点
<style>
/* 选中input标签且value值是nan的标签，显示为蓝色 */
input[value='nan']{
accent-color: blue;
}
/* 选中input标签且value值是nv的标签，显示为蓝色 */
input[value='nv']{
accent-color: pink;
}
</style>
性别:
<input type="radio" value="nan" name="sex"/>男
<input type="radio" value="nv" name="sex"/>女
例子1
<ul>
<li><a href="#internal">内部链接</a></li>
<li><a href="http://example.com">示例链接</a></li>
<li><a href="#InSensitive">非敏感内部链接</a></li>
<li><a href="http://example.org">示例 org 链接</a></li>
<li><a href="https://example.org">示例 https org 链接</a></li>
</ul>
/* 存在 title 属性的 <a> 元素 */
a[title] {
color: purple;
}
/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"]
{
color: green;
}
/* 存在 class 属性并且属性值包含单词"logo"的<a>元素 */
a[class~="logo"] {
padding: 2px;
}
/* 以 "#" 开头的页面内部链接 */
a[href^="#"] {
background-color: gold;
}
/* 存在 href 属性并且属性值结尾是".org"的 <a> 元素 */
a[href$=".org"] {
font-style: italic;
}
/* 存在 href 属性并且属性值包含"example"的 <a> 元素 */
a[href*="example"] {
font-size: 2em;
}
组合使用：
/* 以 "https" 开始，".org" 结尾的链接 */
a[href^="https"][href$=".org"] {
color: green;
}
例子2
/* 将所有语言为中文的 <div> 元素的文本颜色设为红色
无论是简体中文（zh-CN）还是繁体中文（zh-TW） */
div[lang|="zh"] {
color: red;
}
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界你好！</div>
<div lang="zh-TW">世界你好！</div>
<div data-lang="zh-TW">世界你好！</div>
参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_selectors
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors