CSS选择器进阶

一.复合选择器,

1.后代选择器    

        选择器语法:   选择器1 选择器2 {css}

在选择器一所找到的后代样式中,只要满足选择器2,都会设置上样式;(儿子,孙子,重孙...)

注意:后代选择器之间通过空格隔开;

<style>
div p{
        color:red;
  }
</style>

2.子代选择器

         选择器语法: 选择器1>选择器2{css}

在标签选择器1所有的子代中,找到满足选择器2的标签设置样式;

注意:子代选择器只能选中(儿子);选择器之间用>隔开.

<style>
div > p{
        color:red;
  }
</style>

并集选择器

        选择器语法:  选择器1,选择器2{css}

        作用:同时选中多组标签,设置相同的样式;

        找到选择器1和选择器2选中的标签,设置样式;

        并集选择器中通过,隔开,通常每一组选择器一行写一个,提高代码可读性

<style>
div,
 p{
        color:red;
  }
</style>

交集选择器:

        选择器语法:  选择器1选择器2{css}

        作用:选中同事满足多个选择器的标签,

        即能被选择器1选中又能被选择器2选中,设置样式;

        交集选择器之间是紧挨着的,没有东西分离;交集选择器中如果有标签选择器,标签选择器一般写在前边;

<style>
div.box{
        color:red;
  }
</style>

 hover伪类选择器

做用:鼠标悬停在目标上的状态,设置样式;

选择器语法:    选择器:hover{css}

<style>
a:hover{
        color:red;
  }
</style>