9.选择器
来源：互联网 发布：自学c语言要多久 编辑：程序博客网 时间：2024/06/16 06:01
选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style> b, i{ color:red; } b:hover{ color:green; } .btn1:focus{ width:200px; } .father > li:first-child{ color:blue; } .father > li:last-child{ font-style:italic; } .father > li:nth-child(2n){ border:5px solid pink; } .father > li:nth-last-child(2){ list-style:none; } .father>li:nth-of-type(3){ text-decoration:underline; } .father:before{ content:'我肚子饿了'; } .father:after{ content:'今早没吃饭'; } </style></head><body> <!-- 选择器 7.1 标签 7.2 ID #ID名 7.3 class .class名 重复, 多个 多个class名之间用 空格隔开 7.4 关联 选择器1: s1 选择器2: s2 s1 s2 匹配s1所有的后代元素s2 s1>s2 匹配s1下的所有儿子s2 s1+s2 匹配仅此于s1后的兄弟元素s2 s1~s2 匹配s1后所有兄弟元素s2 7.5 组合选择器 s1, s2{ css属性 } 多个选择器之间用 逗号 隔开, 给不同的选择器赋予相同的属性 7.6 伪类选择器 s1:hover{ css属性 } 只能对本身或者是后代元素起作用 s1:hover s2 鼠标滑倒s1上 s2起作用 s1:focus{} 获取到焦点自动触发css属性 7.7 伪元素选择器 s1:first-child s1下的第一个元素 s1:last-child s1下的最后一个元素 s1:nth-child(N) 2n偶数 2n+1奇数 odd奇数 even偶数 s1:nth-last-child(N) s1:nth-of-type(N) s1:before s1:after s1:only-child s1:not() s1:empty 注意点: 相同的对象, 相同的属性, 最后一个起作用 优先级: !important > Id > Class > 标签 --> <b> 熊二： “大哥！你看，那货早上去抢劫银行被抓了！我们还是晚上去吧？”</b> <i> 熊大：“你个傻B！你不知道干坏事的早晚都会被抓吗！听哥的，咱们中午去！！！”</i> <u> </u> <br /> <input type="text" class='btn1' /> <ul class='father'> <li>求证: 1元=1分</li> <li class='jie'>解:</li> <ol> <li>1元 = 100分</li> <li class='fen'>=10分 * 10分</li> <li>=1角 * 1角</li> <li>=0.1元 * 0.1元</li> <li>=0.01元</li> <li>=1分</li> </ol> <li>证明完毕. 数学老湿哭了....因为,毫无破绽!</li> <li>oh no !! shit!!</li> </ul></body></html>阅读全文
0 0
