9.选择器

来源:互联网 发布:自学c语言要多久 编辑:程序博客网 时间:2024/06/16 03:31

选择器

<!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>
原创粉丝点击