CSS-选择器

1.后代选择器

1.1语法：选择器1 选择器2 {属性：属性值}；如：选中哈密瓜 .a2 .b {color：red};

<div class="a2">
    <div>
        <ul>
            <li> <span>手机</span> </li>
            <li>苹果 </li>
            <li>香蕉</li>
            <div class="b">哈密瓜</div>
        </ul>
    </div>
</div>

1.2一个父元素包含多个后代元素时，后代元素会受到父元素影响，（包含关系）a标签除外

 <style>

        .a2 ul{
            color: green;
        }

 </style>

<div class="a2">
        <div>
            <ul>
                <li><span>手机</span> </li>
                <li>苹果 </li>
                <li>香蕉</li>
                <a href="">百度</a>
                <div class="b">哈密瓜</div>
            </ul>
        </div>
   </div>

选中a2，改变其颜色，其后代元素的颜色也会随之改变，a元素除外。

 2.子代选择器

2.1语法：选择器1>选择器2 {属性：属性值}； 如：.ulist>li>span { color: red;  }

<style>

        .ulist>li>span {
                 color: red;
        }

 </style>

<div class="box">
        <ul class="ulist">
            <li>台式机</li>
            <li> <span>笔记本</span> </li>
            <li>平板</li>
            <li>手机</li>
            <li>服务器</li>
        </ul>
 </div>

 注意 :

            1. 选择器1和2之间必须是亲父关系

3.并集选择器

3.1语法：选择器，选择器 {属性：属性值}； （用逗号链接 不能有空格）

 <style>
        /* 需求 : p h2 box2里的a标签都变成粉色背景 */

        .box1 p,h2,.box2 a {
                    background-color: pink;
                   }

    </style>
<div class="box1">
        <p>这是box1里面的p</p>
        <a href="">box1的啊</a>
    </div>
    <div class="box2">
        <a href="">这box的a</a>
        <span>span标签</span>
    </div>
    <h2>这是h2</h2>
</div>