上节学习的选择器是比较基本的选择器, 一些情况下使用起来限制比较多.

CSS允许我们把多种选择器组合在一起使用, 更能发挥选择器的强大功能, 更加方便的选择需要的元素.

根据组合方式不同, 有多种组合选择器.

一. 后代选择器

只要两个选择器用空格键隔开, 那么他们就组成了一个后代选择器.

后代并没有限制是直接的后代, 孙子, 重孙子... 都是可以的.

例如:

1. div p{ }

   这里的div p就是一个后代选择器, 他的意思是选中div的所有的后代中的p元素.

   有一点需要注意, 后代选择器选中的是后代, 也就是说这里选中的是p.

   只要p的长辈中有div, 那这样的p就应该被选中. div并不会被选中.

2. div p a{ } 这里的div p a也是后代选择器. 只要符号div的后代中有p, p的后代中有a, 则这样的a就会被选中.

说明:

• 后代选择器中的选择器可以是前面的任何一种简单选择器来组成. .box .p1 a

• 使用后代选择器, 一定要注意选择器间的空格.

<style>
div p{
    color: red;
    font-size: 30px;
}
</style>
<div>一个破烂烂的div</div>
<div>
    <p>好好学习, 天天向上</p>
</div>
<p>人生最痛苦的事情就是不让写代码</p>
<div>
    <div>
        <p>代码就是生命</p>
    </div>
</div>

提示:

• 其实后代选择器体现元素间的一种嵌套关系. 这种选择器在实际项目中使用比较广泛.

二. 子选择器(>)

相比后代选择器, 子选择器必须是父子关系(直接嵌套)

<style>
div > p{
    color: red;
    font-size: 30px;
}
</style>
<div>一个破烂烂的div</div>
<div>
    <p>好好学习, 天天向上</p>
</div>
<p>人生最痛苦的事情就是不让写代码</p>
<div>
    <ul>
        <li><p>嘿嘿哈哈哈</p></li>
    </ul>
</div>

注意:

• 把后代选择器的空格替换为>就是子选择器

• 子选择器体现的是一种直接嵌套关系.

• IE6不兼容. 从IE7开始兼容.

三. 交集选择器

交集选择器是体现的同时满足两个选择器的情况.

把两个选择器紧紧写在一起.

例如: p.abc 意思: 即是p元素, 类又是abc的元素.

<style>
p.abc{
    color: red;
}
</style>
<p>我只是一个普通的p</p>
<p class="abc">我是p并且我的类是 abc </p>
<div>我是div, 我的类是abc </div>

说明:

• 交集选择器通常是用在元素和类交或者元素和id交.p.abc或p#abc.

四. 并集选择器

用,分割.

<style>
div, p{
    color: red;
}
/*等价于:
div{
    color: red;
}
p{
    color: red;
}
*/
</style>
<div>我会红</div>
<p>我也会红</p>
<a href="#">我不红</a>

说明:

• 当不相关的元素需要相同的样式的时候, 可以使用并集选择器.

五. 相邻兄弟选择器(+)

查找的是相邻的下一个兄弟.

<style>
p + a{
    color: red;
}
</style>
<div>
    <p>第一个 p</p>
    <a href="#">p后面的a</a>
</div>
<div>
    <p>第二个 p</p>
    <div>是个div</div>
    <a href="#">div后面的a</a>
</div>

说明:

• p + a 如果p的下一个兄弟(必须相邻)是a, 就选中这个a. 否则就不选中.

• p + * 选中p的下一个兄弟, 不管什么元素都选.

• 下一个兄弟选择器 IE6不兼容.

六. 通用兄弟选择器(~)

查找的是后面的所有的兄弟(不包含前面的兄弟).

<style>
.lyf ~ li{
    color: red;
}
</style>
<ul>
    <li>林志玲</li>
    <li >刘德华</li>
    <li class="lyf">李易峰</li>
    <li>鹿晗</li>
    <p>一个不太合群的p</p>
    <li>杨幂</li>

</ul>

说明:

• 这是其实是CSS3选择器.

• IE6不兼容.