css选择器组合使用

1. 后代选择器(以空格分隔)

//html=======================

    <div class="content1">
        <p>第一个p</p>
        <p>第二个p</p>
        <div><p>第三个p</p></div>
    </div>
//css=======================
div p {
background:red;
}
//div 后所有的p元素背景全是红色

2. 子元素选择器(以大于号分隔）

//html=======================
<div class="content2">
        <div>
            <p>子元素里的p</p>
        </div>
        <p>
            直系子1
        </p>
        <p>
            直系子2
        </p>
    </div>
//css=======================
.content2>p {
    background: yellow;
}
// 只有直系子1直系子2背景变黄

3. 相邻兄弟选择器（以加号分隔）

//html=======================
    <div>
        我是相临元素1
    </div>
    <div class="content3">
        <div>我是内容</div>
    </div>
    <div>
        我是相临元素2
    </div>
    <div>我是相临元素3</div>
    <p>我是相临元素4</p>
    <div>
        我是相临元素5
    </div>
//css=======================
.content3+div {
    background: green;
}
//只有相临元素2变绿

4. 普通兄弟选择器（以破折号分隔）

//html=======================
    <div>
        我是相临元素1
    </div>
    <div class="content4">
        <div>我是内容</div>
    </div>
    <div>
        我是相临元素2
    </div>
    <div>我是相临元素3</div>
    <p>我是相临元素4
        <div>是我元素4-1</div>
        <p>我是元素4-2
            <div>是我元素4-2-1</div>
        </p>
    </p>
    <div>
        我是相临元素5
    </div>
//css=======================
.content4~div {
    background: blue;
}
// 只有 我的相临元素2、3、5、4-1、4-2-1颜色为蓝色

5. 多个类共用一个样式(以逗号分隔)

//html=======================
<div>
    <div class="content5">div内容</div>
    <p class="content6">p内容</p>
    <span class="content7">span内容</span>
</div>
//css=======================
.content5,.content6,.content7 {
    color:lawngreen;
}
//  三个元素里面的内容全是亮绿色

6. 多个元素有同一个类名如果改变当前元素当前类名的样式（以'.'连接）

//html=======================
<div>
        <div class="content8">
            我是div标签1
        </div>
        <p class="content8">
            我是p标签
        </p>
        <div class="content8">
            我是div标签2
        </div>
        <span class="content8">
            我是span标签
        </span>
</div>
//css=======================
div.content8 {
    color:lightblue;
}
//  只有div里面的字是亮蓝色