css入门【4】-css高级选择器

1.后代选择器

后代选择器又叫包含选择器。
通过标签之间的嵌套关系，层级关系，限定大体范围，在范围内查找。
从左到右，中间空格连接。
空格两边只要是后代关系都可以，不一定是父子关系。

.d1 li{
            color:skyblue;
        }
    .d2 li{
        color:pink;
    }

  <div class="d1">
        <ul>
            <li>这里是第一个div的li</li>
            <li>这里是第一个div的li</li>
            <li>这里是第一个div的li</li>
            <li>这里是第一个div的li</li>
            <li>这里是第一个div的li</li>
        </ul>
    </div>
    <div class="d2"> 
        <ul>
            <li>这里是第二个div的li</li>
            <li>这里是第二个div的li</li>
            <li>这里是第二个div的li</li>
            <li>这里是第二个div的li</li>
            <li>这里是第二个div的li</li>
        </ul>
    </div>

2.交集选择器

满足条件一以也满足条件二，两种或多种选择器在标签上。
直接连接，中间没有任何空格。

   li.one{
        color:red;
    }
     <li class="one">这里是第一个div的li</li>

交集使用的基础选择器，可以是两个类选择器，也可以是标签选择器，类选择器和id选择器的混写。
IE6不支持类的连续交集。

3.并集选择器

有很多元素可能都有相同的css样式，我们可以通过并集选择器将这些标签写在一起，统一设置css样式，前面所有的选择器都可以成为并集的一项，用逗号隔开。

 p,li.one{
        color:green;
    }

等价于

 p{
        color:green;
    }
    li.one{
        color:green;
    }