<!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>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
