CSS选择器进阶、背景样式、显示模式

本文链接：https://blog.youkuaiyun.com/btufdycxyffd/article/details/126928256

本文详细介绍了CSS中的选择器进阶用法，包括后代选择器、子代选择器等，以及背景样式的设置方法，并探讨了不同元素的显示模式及如何进行转换。

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

优快云话题挑战赛第2期
参赛话题：学习笔记

文章目录

1.选择器进阶

我们学习了基本的选择器，都是单个选择器，那么是否有更复杂的呢，答案是有的，下面就介绍几个比较复杂的选择器。

后代选择器

后代选择器是指通过HTML嵌套关系，选择父元素后代中满足条件的元素。

选择器1 选择器2{css}

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

注意点：

后代包括（儿子，孙子，重孙子......）而下面讲到的子代只包含子代。

子代选择器

后代选择器是指通过HTML嵌套关系，选择父元素子代中满足条件的元素。

选择器1>选择器2{css}

并集选择器

并集选择器是指同时选择多组标签，设置相同的样式。

选择器1,选择器2{css}

注意点：

并集选择器每组选择器可以是基础选择器也可以是复合选择器（指后代和子代）。

并集选择器通常一行写一个，提高代码可读性。

交集选择器

    <span class="box">span标签：box</span>
    <span>span标签</span>
    <h3 class="box">h3标签：box</h3>

上面一组代码我想选中第一行设置成红色怎么设置呢？这就需要用到交集选择器（可以理解成数学的交集）。

选择器1选择器2{css}

注意点：

选择器直接没有东西隔开，是紧挨着的。

如果有标签选择器，标签选择器必须写在最前面。

伪类选择器

伪类选择器的作用是选中鼠标在元素上的状态，设置样式。

选择器：hover{css}

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 */
        div p{
            color: blue;
        }
        /* 子代选择器 */
        div>a{
            color: red;
        }
        /* 并集选择器 */
        h1,
        h2,
        strong{
            background-color:pink;
        }
        /* 交集选择器 */
        span.box{
            background-color: green;
        }
        /* 伪类选择器 */
        h4:hover{
            color:yellow;
            background-color: skyblue;
        }
        
    </style>
</head>
<body>
    <p>p标签</p>
    <div>
        <p>div里的p标签</p>

        <a href="#">div里面的a</a>
        <span>
            <a href="#">div里面的span的a</a>
        </span>
    </div>

    <h1>h1标签</h1>
    <h2>h2标签</h2>
    <strong>strong标签</strong>

    <br>
    <span class="box">span标签：box</span>
    <span>span标签</span>
    <h3 class="box">h3标签：box</h3>

    <h4>h4标签使用伪类</h4>


</body>
</html>

最后一行为鼠标悬停时的效果。

2.背景样式

背景样式包括两个方面：背景颜色和背景图片。颜色都知道是color了那么其他几个呢。

背景颜色

background-color: 取值;

背景颜色的取值我们用了关键字表示，其实还有其他几种表示方式：rgb表示法，rgba表示法，十六进制......

注意点：

rgba(0,0,0,0)表示（红，绿，蓝，透明度）。

背景颜色的默认值是透明色：rgba(0,0,0,0)，transparent。

背景颜色不会影响盒子大小，并且还能看清盒子大小和位置，一般先给盒子设置背景颜色。

背景图片

background-image: url(地址);

背景平铺

background-repeat: 取值;

背景位置

background-position: 水平方向位置 垂直方向位置;

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 背景颜色 */
        .bgc{
            /* background-color: pink; */
            background-color: rgba(200, 150, 150, 0.5);
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
        .center{
            text-align: center;
        }
        /* 背景图片 */
        .bgi{
            width: 250px;
            height: 220px;
            margin: 0 auto;
            background-image: url(./img/circ.png);
        }
        /* 背景平铺 */
        .bgr{
            width: 250px;
            height: 220px;
            margin: 0 auto;
            background-color: rgba(200, 150, 150, 0.5);
            background-image: url(./img/circ.png);
            background-repeat: no-repeat;   
             /* 背景位置 省略不写的默认为居中*/
             background-position: top;
        }
    </style>
</head>
<body>
    <div class="bgc">
        <p class="center">div</p>
    </div>
    <br>
    <div class="bgi"></div>
    <br>
    <div class="bgr"></div>
</body>
</html>

3.显示模式

我们学习的元素也不少了，那么他们的显示模式分别是怎样的呢，这里分为三种显示模式，也可以说是显示特点。

块级元素

特点:1.独占一行。 2.宽度默认是父元素的宽度，高度由内容撑开。 3.可以设置宽高。

如：div，p，h系列，ul，li，dl，dt......

行内元素

特点:1.一行可以显示多个。 2.宽度和高度默认由内容撑开。 3.不可以设置宽高。

如：a，spar，b，u，i，s，strong......

行内块元素

特点:1.一行可以显示多个。 2.可以设置宽高。

如：input，textare，button，selec......

元素显示模式转换

我想要div又能一行多个显示，又能设置宽高，怎么办呢？其实元素显示模式直接可以相互转换的。

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .display{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .change{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* display: block; */
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- 块级元素 -->
    <div class="display">div</div>
    <div class="display">div</div>
    <!-- 行内元素 -->
    <br>
    <span class="display ">span</span>
    <span class="display ">span</span>
    <!-- 行内块元素 -->
    <input type="text" class="display">
    <input type="text" class="display">
    <!-- 元素显示模式转换 -->
    <span class="display change">span</span>
    <span class="display change">span</span>
</body>
</html>