前段成长之路——CSS3基础（二）选择器

<div class="test9">    <!--        only-child:选择父元素中为只有唯一的一个子元素。        only-of-type:有很多子元素，只有一种元素是唯一的    -->    <div class="post">        <div></div>        <div></div>        <p></p>    </div>    <div class="post">        <div></div>        <p></p>        <p></p>    </div>    <div class="post">        <div></div>    </div></div><style>    .test9 .post div,.test9 .post p{        width:200px;        height:50px;        margin:20px;        background: gray;    }    .test9 .post div:only-child{        background: orange;    }    .test9 .post p:only-of-type{        background: red;    }</style><!--------------------------------------------------><div class="test8">    <!--        nth-of-type(n) :定位父元素某个类型的子元素或多个某个类型的子元素        nth-last-of-type(n):定位父元素某个类型的最后一个子元素或多个某个类型的子元素    -->    <p></p>    <p></p>    <p></p>    <div></div>    <div></div>    <div></div></div><style>    .test8 p,.test8 div{        width:200px;        height:50px;        margin:20px;        background: gainsboro;    }    .test8>p:nth-of-type(2n){        background: orange;    }    .test8>div:nth-last-of-type(2n-1){        background: red;    }</style><!--------------------------------------------------><div class="test7">    <!--        first-of-type:指定了元素的类型，定位父元素下某个类型的第一个子元素        last-of-type:定位父元素某个类型的最后一个子元素    -->    <p></p>    <p></p>    <p></p>    <div></div>    <div></div>    <div></div></div><style>    .test7 p,.test7 div{        width:200px;        height:50px;        margin:20px;        background: gainsboro;    }    .test7>div:first-of-type{        background: orange;    }    .test7>p:last-of-type{        background: red;    }</style><!--------------------------------------------------><div class="test6">    <!--        nth-child(N) : 选择器用来定位某个父元素的一个或多个特定的子元素。        nth-last-child(N) : 选择器从父元素最后一个子元素开始计算，来选择特定的元素    -->    <ul>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul></div><style>    .test6 ul li{        list-style: none;        margin:10px;        width:200px;        height:50px;        background: orange;    }    .test6 ul>li:nth-child(2n-1){        background: red;    }    .test6 ul>li:nth-last-child(2n){        background: green;    }</style><!--------------------------------------------------><div class="test5">    <!--        first-child:选择父元素的第一个子元素        last-child:选择父元素的最后一个子元素    -->    <ul>        <li></li>        <li></li>        <li></li>    </ul></div><style>    .test5 ul li{        display: inline-block;        width:200px;        height:200px;        background:orange;        margin:20px;    }    .test5 ul li:first-child{        background:red;    }    .test5 ul li:last-child{        background:green;    }</style><!--------------------------------------------------><div class="test4">    <!--        target:目标选择器，用来匹配文档的URL的某个标识符的目标元素    -->    <h2><a href="#brand">Brand</a></h2>    <div class="menuSection" id="brand">        content for Brand    </div></div><style>    .test4 .menuSection{        display: none;    }    .test4 :target{        display: block;    }</style><!--------------------------------------------------><div class="test3">    <!--        not：否选择器        empty:空选择器    -->    <div class="c1">1</div>    <div class="c2">2</div>    <div class="c3"></div></div><style>    .test3{        width:910px;        height:210px;    }    .test3 div{        display: inline-block;        width:300px;        height:200px;        background:orange;        border:1px solid blue;    }    .test3 div:not[class="c2"]{        background:red;    }    .test3 div:empty{        background:green;    }</style><!--------------------------------------------------><div class="test2">    <p>“:root”选择器等同于html</p>    <p>简单点说:</p>    :root{background:orange}<br>    html {background:orange;}</div><!--------------------------------------------------><div class="test1">    <a href="xxx.pdf">我连接的是PDF文件</a>    <a href="#" class="icon">我类名是icon</a>    <a href="#" title="我的title是more">我的title是more</a>    <style>        a[class^="ico"]{            background:green;            color:#fff;        }        a[href$="pdf"]{            background:orange;            color:#fff;        }        a[title*="more"]{            background:blue;            color:#fff;        }    </style></div>