基于伪元素的特点可以知道其优缺点，也引用别人文章的话： 优点 减少dom节点数 让css帮助解决部分js问题，让问题变得简单 缺点 不利于SEO 无法审查元素，不利于调试 [伪元素用法](https://www.cnblogs.com/guangzhou11/p/7358491.html) 示例：radio重写  html ~~~ <div class="quanxian-option"> <input class="radio-btn" type="radio" name="quanxian" value="a" id="one"> <label for="one" class="txt">我同意XX用户租赁协议及损坏赔偿规则</label> <input class="radio-btn" type="radio" name="quanxian" value="a" id="two"> <label for="two" class="txt">我同意XX用户租赁协议及损坏赔偿规则</label> </div> ~~~ css ``` .quanxian-option .txt { cursor: pointer; } .quanxian-option .txt:before { display: inline-block; content: ''; width: 14px; height: 14px; background: #fff; border: 1px solid #b4b4b4; position: absolute; margin-top: 2px; margin-left: -20px; } .quanxian-option .radio-btn { cursor: pointer; vertical-align: top; margin-right: 2px; } .quanxian-option .radio-btn:not(:first-child) { margin-left: 20px; } .quanxian-option .radio-btn:checked + label::before { background-color: #CC0000; content: '✓'; font-size: 14px; line-height: 14px; text-align: center; color: #fff; } ``` ## 所有CSS伪类/元素 | 选择器 | 示例 | 示例说明 | | :-- | :-- | :-- | | [:link](https://www.runoob.com/cssref/sel-link.html) | a:link | 选择所有未访问链接 | | [:visited](https://www.runoob.com/cssref/sel-visited.html) | a:visited | 选择所有访问过的链接 | | [:active](https://www.runoob.com/cssref/sel-active.html) | a:active | 选择正在活动链接 | | [:hover](https://www.runoob.com/cssref/sel-hover.html) | a:hover | 把鼠标放在链接上的状态 | | [:focus](https://www.runoob.com/cssref/sel-focus.html) | input:focus | 选择元素输入后具有焦点 | | [:first-letter](https://www.runoob.com/cssref/sel-firstletter.html) | p:first-letter | 选择每个 元素的第一个字母 | | [:first-line](https://www.runoob.com/cssref/sel-firstline.html) | p:first-line | 选择每个 元素的第一行 | | [:first-child](https://www.runoob.com/cssref/sel-firstchild.html) | p:first-child | 选择器匹配属于任意元素的第一个子元素的 元素 | | [:before](https://www.runoob.com/cssref/sel-before.html) | p:before | 在每个元素之前插入内容 | | [:after](https://www.runoob.com/cssref/sel-after.html) | p:after | 在每个元素之后插入内容 | | [:lang(*language*)](https://www.runoob.com/cssref/sel-lang.html) | p:lang(it) | 为元素的lang属性选择一个开始值 |