universal选择（通用选择器）

grouoing可以改变一组元素样式

<style>
    h1,p{/*这两个就是一组了*/
        color:red;
    }
</style>

<h1>asdf</h1>
<p>asdfs</p>

decendant选择器（后代选择器）

<style>
    h1{color:red}
    em{color:red}
    h1 em{color:blue}
    div * p{color:green}/*相当于div里面的元素的元素。星号代表任意的一个元素*/
</style>
<div>
    1111
    <p>222</p>
    <div>3333
    <p>4444</p>
    </div>
</div>
<em>very</em>
<h1>this headlline is <em>very</em>important</h1>

child选择器（直接后代选择器）

<style>
    body > p{color:red}
    div ol>li p{color:green}/*空格为只要是后就可以，大于号为紧挨着*/
</style>
<div>
    <strong><!--这里就不用紧挨着-->
        <ol>
            <li>
                <p>有屁就放</p>
            </li>
        </ol>
    </strong>
</div>
<body>
<p>asdf</p>
<div>
    <p>asdfasd</p>
</div>
</body>

adjacent sibling 选择器（相邻的兄弟）

<style>
    h1+h2{color:red}
</style>
<h1>asdfasdf</h1>
<h2>asdfasdf</h2><!--两个h2都是兄弟元素，与h1紧挨着的变红色-->
<h2>asdfasdf</h2>

attribute

<style>
   h1[title]{color:blue;}
</style>
<h1 title="asdf">this</h1>/*这里因为title变懒了*/
<h1>this</h1>

波浪线选择器

<style>
   h1[title~=love]{color:blue;}/*只要含有一段字符就可以，注意前方有个波浪线*/
</style>
<h1 title="i love you">this</h1>/*要有空格*/
<h1 title="qwer">this</h1>
<h1>this</h1>

开头匹配

<style>
   *[lang|="en"]{color:red}/*开头要一样，用横杠隔开，不能用空格*/
</style>
<h1 lang="en">this</h1>
<h1 lang="en-us">this</h1>
<h1 lang="en cockney">this</h1>

universal选择（通用选择器）

推荐阅读更多精彩内容