基于偽元素的特點可以知道其優缺點，也引用別人文章的話： 優點 減少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屬性選擇一個開始值 |