CSS3的偽類選擇器
阿新 • • 發佈：2019-02-19
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> li:nth-child(2n){ color: red; } /*倒數順序改變*/li:nth-last-child(2){ color: red; } /*nth-of-type 找對應型別的第幾個*/p:nth-of-type(2){ color: red; } /*頭和尾改變*/ /*li:first-child{ color: red; } li:last-child{ color: red; }*/ /*狀態偽類選擇器： E:checked {}匹配使用者介面上處於選中狀態的元素E。(用於input type為radio單選框與checkbox多選框時) E:enabled {}匹配使用者介面上處於可用狀態的元素E。 E:disabled {}匹配使用者介面上處於禁用狀態的元素E。 */input:checked + label{ margin-left: 10px; color: red; } input[id="c"]:enabled{ border: 1px solid red; background: yellow; color: green; } input[id="d"]:disabled{ border: 1px solid green; } </style> <title>偽類選擇器</title> </head> <body> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> <li>列表7</li> <li>列表8</li> <li>列表9</li> </ul> <div> <p>ss</p> <div>1ss</div> <p>ss</p> <p>ss</p> <p>ss</p> </div> <!--狀態偽類--><form action=""> <!--label 關聯 用for屬性指定與誰關聯 被關聯項用id進行標註--><input id="a" type="radio"name="sex" value="1"> <label for="a">男</label> <input id="b" type="radio"name="sex" value="2"> <label for="b">女</label> <label for="c">姓名</label> <input id="c" type="text"> <label for="d">地址</label> <input id="d" type="text" disabled="hidden"> </form> </body> </html>