[type = "radio"]，实际上 这是一个简称。
指的是 “属性值匹配选择器”； 正式文件：
类选择器 和 ID 都属于选择器 属性选择器。 应为本质上 是 匹配 HTML 中 ， 是 匹配 HTML 中的 。
ID选择器 和 类选择器
ID选择器 和 类选择器 ， 看他们的身份起来 高贵而 特殊， 毕竟 HTML 原生属性那么多， 就 id 和 class 两个属性 有专门的选择器； 实际上 正式因为他们 足够的普通 才有此待遇。几乎 所有的 HTML 元素都有 name type 这些常见属性； 但是 他两 主要出现在 控件 元素上。 如果所有的 元素 的 name 都比较 有意义的话。 相信 也会有 他两的 专属 属性选择器
ID选择器 和 类选择器 ， 都属于 属性选择器。 但他们的实际表现 却有
/* ID 选择器 */ #foo { } /* 类选择器 */ .foo { }ID 选择器 比 类选择器 优先级 高一级， 在实际开发中 以类选择器主。 所以不玩就不能有 不要使用 ID选择器
<P id="cs-li" class="cs-li">列表类容 1</P> #cs-li { color: red; } .cs-li { color: blue; }
同时用 ID选择器 和 类选择器 设置颜色； 但是不能覆盖
ID 具有唯一性， 而；
<button class="cs-button cs-button-primary">主按键</button> .cs-button { } .cs-button-primary { }但是 ID 选择器
<button id="cs-button cs-button-primary">主按键</button> #cs-button { } /* 无效 */ #cs-button-primary { } /* 无效 */无论是 使用 JavaScript 的选择器 API 获取元素， 还是使用 CSS 的 ID 选择设置样式， 对于 ID， 其语义不能重复； 单实际开发的时候，
<button id="cs-button">按钮1</button> <button id="cs-button">按钮2</button> //长度为 2 document.querySelecorAll('#cs-button').length; /* 可同时设置 按钮1 和 按钮2 的样式 */ #cs-button { }！ 应为 ID 选择器 主要是提供 JavaScript 使用的
属性值 选择器直接匹配：
属性值 直接匹配 选择器包括下面4 种：
[attr]
[attr="val"]
[attr~="val"]
[attr|="val"]
，前面两种 大家看的比较多。后面两种 见的人 估计少一些
[attr]
表示 只要包含指定的 ， 特别适合一些 HTML 布尔属性， 这些布尔属性 ！无论值的 内容是什么， 大家都认为这样的属性是 true; 例如 以下输入框的写法 都是警用:
<input disabled> <input disabled=""> <input disabled="disabled"> <input disabled="true"> <input disabled="false">此时， 若要使用属性选择器 判断输入框是否 禁用， 直接用下面的选择器 就可以了。 无需关系 具体属性值 到底是什么:
[disabled] {}说到 disabled 就不得不提 另一个常见的布尔属性 checked, 两者看上去都很不错 其实也有类似 差别不小！一般不建议使用！ checked
[attr="val"]
[attr=''value''] 是属性值 选择器完全匹配， 例如单选 或者 复选框：
[type="radio"] {} [type="checkbox"] {}或者<ol>, <menu> 元素的 type 值
/* 小写字母序号 */ ol[type="a"] {} /* 罗马序号小写 */ ol[type="i"] {} menu[type="content"] {} menu[type="toolbar"] {}或者自定义 属性值的 完整匹配
[data-type="1"] {}其他注意事项
（1） 不区分单引号 和 双引号， 单引号和双引号 都是合法的：
[type="radio"] {} [type='radio'] {}（2）引号都是 可以省略的： 但是 在省略 引号的时候 有空格 等 ； 需要用到 转义
[type=radio] {} [type=checkbox] {} <button class="cs-button cs-button-primary">主按键</button> [class=cs-button\0020cs-button-primary] //或者 [class="cs-button cs-button-primary"]（3）[type=email] [type=text] [type=url] [type=tel] [type=range] 浏览差异比较大 不建议使用
（4）如下 HTML
<input value="20"> [value="20"] {} 此时 如果我们改变 输入框的值为 10，无论是手动还是是用 javascript 更改，属性选择器都依然 按照[value="20"]渲染： 除非：我们使用 serAttribute 方法改变属性： input.setAttribute("value",10); 此时 属性选择器会按照 [value="10"] 渲染
[attr~="val"]
[attr~='"val"] 是 属性值单词 完全匹配选择器， 专门用来匹配属性中的单词， 其中 ~= 用来连接属性 和 属性值。
有些属性值 （如 class 属性，rel 属性 或者 一些自定义属性） 包含多个关键词， 这是 可以使用空格 分割这些关键词 例如：
<a href rel="nofollow noopener">连接</a> 此时 就可借助改 选择器实施匹配 例如： [rel~="noopener"] {} [rel~="nofollow"] {}匹配的属性值 不能是 空字符串； 例如下面这种选择器 一定 不会匹配任何元素； 应为它的属性值 是空的 字符串：
/* 无任何匹配 */ [rel~=""] { }如何匹配的属性值 只是部分字符串， 那么也是无效的。 例如 假设有选择器 [arrt~="val"], 则下面两段 HTML 都不匹配：
<! --不匹配--> <div attr="value"></div> <! --不匹配--> <div attr="val-ue"></div>但是 如果字符串 前后 有空格 或者连续多个 空格分隔； 则可匹配
<! --匹配--> <div attr=" val "></div> <! --匹配--> <div attr="val ue"></div>另外， 属性值 单词完全匹配选择器对 非ASC|| 范围的字符（如中文） 也是有效的 例如：
[attr~=帅] {} 下面的 HTML 是可以匹配的： <div attr="我 帅">我是帅锅</div>
属性值 单词完全匹配选择器 非常适合包含多种组合属性的场景， 例如：
<div data-align="left top"></div> <div data-align="top"></div> <div data-align="right top"></div> <div data-align="right "></div> <div data-align="right buttom"></div> <div data-align="buttom"></div> <div data-align="left buttom"></div> <div data-align="left"></div> <div data-align="center"></div>此时，最佳实践就是 使用属性值单词完全匹配选择器：
[data-align] { left:50%; top:50%; } [data-align~="top"] { top:0; } [data-align~="right"] { right:0; } [data-align~="bottom"] { bottom:0; } [data-align~="left"] { left:0; }这样的 CSS 代码 足够精简 且互不干扰，有专门命名空间 代码可读性强 且选择器的 优先级和类名 一致 很好管理
[attr|="val"]
[attr|="val"] 是属性值 起始片段完全匹配 选择器，表示 具有 attr 属性的元素， 其值要么 正好是 val, 要么外加 短横线 - 开头
<!-- 匹配 --> <div attr="val"></div> <!-- 匹配 --> <div attr="val-ue"></div> <!-- 匹配 --> <div attr="val-ue bar"></div> --------------------------------------------------------------------- <!-- 不匹配 --> <div attr="value"></div> <!-- 不匹配 --> <div attr="val bar"></div> <!-- 不匹配 --> <div attr="bar val-bar"></div>这个选择器 必须 严格遵循 开头匹配的规则
另外这个 选择器 最初设计初衷是 自语言匹配， 用在<a>元素的 hrelang 属性