css：选择器进阶

后代选择器：空格

作用：根据html标签的嵌套关系，选择父元素 后代中 满足条件的元素

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

结果：在选择器1所找到的标签的后代中，找到满足选择器2的标签，设置样式

注意点：后代包括儿子、孙子、重孙子...

<!-- 后代选择器 -->
    <!-- 给div的后代p设置颜色 -->
    <div>这是div</div>
    <p>这是p</p>
    <div>
        <p>这是div的儿子p</p>
    </div>
    <div>
        <span>
            <p>这是div的孙子p</p>
        </span>
    </div>
    <!-- 给father的后代span设置颜色 -->
    <div class="father">
        <span>这是father的儿子span</span>
    </div>
    <!-- 给grandfather的后代father设置颜色 -->
    <span class="grandfather">
        <span class="father">
        <p>这是grandfather的孙子p</p>            
        </span>
    </span>

div p{
    color: green;
}
.father span{
    color: aqua;
}
.grandfather .father{
    color: blue;
}

子代选择器：>

作用：根据html标签的嵌套关系，选择父元素 子代中 满足条件的元素

语法：选择器1>选择器2

结果：在选择器1所找到的标签的子代中，找到满足选择器2的标签，设置样式

注意点：子代只包括儿子

<!-- 子代选择器 -->
    <!-- 给ganner的子代a设置颜色，给ganner的子代h6 的子代a设置颜色 -->
    <div class="ganer">父级
        <a href="#">这是div里面的a</a>
        <h6><a href="#">这是div里面的h3里面的a</a></h6>
    </div>

.ganer>a{
    color: blueviolet;
}
.ganer>h6>a{
    color: crimson;
}

并集选择器：，

作用：同时选择多组标签，设置相同的样式

语法：选择器1，选择器2{css}

结果：找到选择器1和选择器2选中的标签，设置样式

注意点：并集选择器中的每组选择器可以是基础选择器或者复合选择器

               并集选择器中的每组选择器通常一行写一个，提高代码的可读性

<!-- 并集选择器 -->
    <!-- 同时给 textarea 和 h5 和 div的后代span的后代h1 设置颜色 -->
    <textarea cols="60" rows="10"></textarea>
    <h5 class="combine">h5</h5>
    <div>
        <span>
            <h4>
                h4
            </h4>
        </span>
    </div>

textarea,
.combine,
div>span>h4{
    color: darkgoldenrod;
}

交集选择器：连着写

作用：选中页面中同时满足多个选择器的标签

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

结果：（既又原则）找到页面中既能被选择器1选中的，又能被选择器2选中的标签，设置样式

注意点：交集选择器中如果有标签选择器，标签选择器必须写在最前面

<!-- 交集选择器 -->
    <!-- 找到带有union的h3，设置颜色 -->
    <h3>这是不带union的h3</h3>
    <h3 class="union">这是带union的h3</h3>
    <h2 class="union">这是带union的h2</h2>

h3.union{
    color: hotpink;
}

hover伪类选择器

作用：选中鼠标 悬停 在元素上的 状态，设置样式

语法： 选择器：hover{css}

注意点：伪类选择器选中的元素的某种状态

<!-- hover伪类选择器 -->
    <!-- 鼠标悬停时a的颜色改变，背景颜色改变 -->
    <a href="#">这是一个超链接</a>

a:hover{
    color: orchid;
    background-color: dimgray;
}

VSCODE的emmet语法

作用：通过简写语法，快速生成代码

语法：类似于刚刚学习的选择器的写法

记忆           示例                          效果

标签名         div                        <div></div>

类选择器       .red                  <div class="red"></div>

id选择器       #one                   <div id="one"></div>

交集选择器   p.red#one             <p class="red" id="one"></p>

子代选择器     ul>li                     <ul><li></li></ul>

内部文本    ul>li{li的内容}        <ul><li>li的内容</li></ul>

创建多个      ul>li*3           <ul><li></li><li></li><li></li></ul> (更新后的版本不支持该种写法)

回退版本