css复合选择器

01_交集选择器

作用：选中符合条件的元素。只有满足第一个且满足第二个且满足第三个。。。才能有这个效果

.beauty跟p.beauty含义不同。且同样会出现覆盖效果，如果一个元素里面有多个class类，那么电脑则会选择style里面最后出现的

例如“土豪明星。”

 注意：

1.有标签名的一定要写上标签名：p.rich。

2.id几乎没用，还不如直接写元素选择器。

3.交际中不能出现两个元素选择器，因为不可能同时出现p和span。

4.用得最多的是元素选择器＋类名选择器：p.rich

02_并集选择器

选择多个选择器对应的元素，又称分组选择器。a或b或c或d都满足这个样式

 #sheep,

        .beauty,

        .rich,

        .dog,

        .pig{

            font-size: 40px;

            background-color: blue;

            width: 160px;

        }

注意 ：

1.并集选择器一般竖着写

2.任何形式的选择器都可以作为并集选择器中的一部分，比如id、class。

3.并集选择器通常用于集体声明，可缩小、简化样式表体积。

03_后代选择器

04_子代选择器 

<div>

        <a href="#">张三</a>

        <a href="#">李四</a>

        <a href="#">王五</a>

        <p>

            <a href="#">赵六</a>

        </p>

    </div>

如何写代码让浏览器选中除开p标签里面的a元素，其他都标记成红色？

<style>

        div > a{

            color: red;

        }

    </style>

“>”表示div的儿子；

而

<style>

        div  a{

            color: red;

        }

    </style>

“div a”代表div的所有子代。包括p标签里面的a。

05兄弟选择器

相邻兄弟选择器 （仅指的是与那个元素以及他下一个）

通用兄弟选择器