CSS进阶（P66-P86）_css 找出含有什么类型的孩子-优快云博客

本文链接：https://blog.youkuaiyun.com/yuzhiweihhhhhh/article/details/127270355

本文详细介绍了CSS中各种选择器的应用技巧，包括复合选择器、并集选择器、交集选择器及Emmet语法的使用方法。此外，还深入讲解了背景相关属性如背景颜色、背景图片等的设置技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

能够使用复合选择器在 HTML 中选择元素,能够使用 Emmet 语法提高编码速度, 能够使用 hover伪类选择器设置标签的鼠标悬停状态，能够使用背景相关属性装饰元素的背景样式，能够认识三种常见的元素显示模式的特点，能够使用代码实现不同元素显示模式间的转换，能够实现行内元素和块级元素水平居中。

一、选择器进阶

1.1复合选择器（针对具有嵌套关系的标签）

1.1.1后代选择器：空格

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

选择器语法：选择器1 选择器2（CSS）

结果：在选择器1代所找到标签的后代（儿子、孙子、重孙子....）中，找到满足选择器2的标签，设置样式

注意点：后代包括：儿子、孙子、重孙子....，后代选择器中，选择器与选择器之前通过空格隔开

1.1.2子代选择器：>

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

选择器语法：选择器1 >选择器2（CSS）

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

注意点：子代只包括儿子，子代选择器中，选择器与选择器之间通过>隔开

<style>
        /* 空格隔开的是后代, 儿子,孙子,重孙子,此时两个 */
         div a {
            color: red;
        } 

        /* 只想选中儿子a */
        /* div的儿子a文字颜色是红色 */
        div>a {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>

1.2并集选择器

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

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

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

注意点：并集选择器中的每组选择器之间通过'，'分隔，每组选择器可以是基础选择器或者符合选择器，每组选择器通常一行写一个，提高代码的可读性

1.3交集选择器

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

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

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

注意点：交集选择器中的选择器之间是紧挨着的，没有东西分隔，如果有标签选择器，标签选择器必须写在最前面

1.4 Emmet语法

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

1.5 hover伪类选择器

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

选择器语法：选择器：hover{CSS}

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

二、背景相关属性

2.1背景颜色

属性名：background-color（bgc）

属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制......

注意点：背景颜色默认值是透明：rgba（0，0，0，0），背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

2.2背景图片

属性名：background-image（bgi）

属性值：background-image：url（‘图片的路径’）；

注意点：背景图片中的url中可以省略引号，背景图片默认是在水平和垂直方向平铺的，背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

2.3背景平铺

属性名：background-repeat（bgr）

属性值：

2.4背景位置

属性名:background-position(bgp)

属性值：background-position：水平方向位置垂直方向位置；

注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

2.5背景相关属性连写

属性名：background（bg）

属性值：单个属性的合写，取值之间以空格隔开

书写顺序：推荐：background：color image repeat position（这里不分先后顺序）

省略：可以按照需求省略，特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url（）

注意点：如果需要设置单独的样式和连写，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面

div {
            width: 400px;
            height: 400px;
            /* 不分先后顺序 背景色  背景图  背景图平铺  背景图位置 */
            /* background: pink url(./images/1.jpg) no-repeat center bottom; */
            /* 背景图位置如果是英文单词可以颠倒顺序 */
            background: pink url(./images/1.jpg) no-repeat bottom center ;

            /* 测试背景图位置如果是数值 不要颠倒顺序 */
            /* 水平50px, 垂直100px */
            /* background: pink url(./images/1.jpg) no-repeat 50px 100px; */
            background: pink url(./images/1.jpg) no-repeat 100px 50px;


        }

拓展：img标签和背景图片的区别

需要在网页中展示一张图片的效果：

方法一：直接在网页中展示一张图片的效果，img标签是一个标签，不设置宽高默认会以原尺寸显示

方法er：div标签+背景图片，需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

重要的图片使用img插入图片，不重要的图片使用背景图片