当前位置：首页 > news >正文

【CSS3】02-选择器 + CSS特性 + 背景属性 + 显示模式

news 来源：原创 2025/5/20 19:37:00

本文主要介绍：选择器、CSS属性、背景属性和显示模式的操作写法。

1. 复合选择器

1.1 后代选择器

1.2 子代选择器

1.3 并集选择器

1.4 交集选择器

2. 伪类选择器

2.1 超链接（拓展）

3. CSS特性

3.1 继承性

3.2 层叠性

3.3 优先级

叠加计算规则

4. Emmet写法

5. 背景属性

5.1 背景图

5.2 平铺方式

5.3 背景图位置

5.4 背景图缩放

5.5 背景图固定

5.6 复合属性

6. 显示模式

6.1 块级元素

6.2 行内元素

6.3 行内块元素

6.4 转换显示模式

1. 复合选择器

有两个或者多个基础选择器，通过不同的方式组合而成

能够更准确更高效的选择目标元素（标签）

1.1 后代选择器

选中某元素的后代元素

写法：父选择器子选择器 { CSS属性 }

1.2 子代选择器

选中某元素的子代元素

父选择器 > 子选择器 { CSS属性 }

1.3 并集选择器

选中多组标签设置相同的样式

形式：选择器1,选择器2,...选择器N { CSS属性 }

1.4 交集选择器

选中同时满足多个条件的元素

选择器1选择器2...选择器N { CSS属性 }

2. 伪类选择器

伪类表示元素状态，选择元素的某个状态设置样式

鼠标悬停状态：选择器:hover { CSS属性 }

2.1 超链接（拓展）

四种状态：

:link 访问前

:visited 访问后

:hover 鼠标悬停

:active 点击时激活

如果要给超链接设置以上四个状态需要按 LVHA 的顺序书写

    <style>
        a:link {
            color:red;
        }
        a:visited {
            color:green;
        }
        a:hover {
            color: blue;
        }
        a:active {
            color: orange;
        }
    </style>
</head>
<body>
    <a href="#">a标签测试伪类</a>
</body>

3. CSS特性

化简代码，定位问题

3.1 继承性

子级标签默认继承父级标签的文字控制属性

    <style>
        /* 给最高的父级文字控制属性 */
        /* 当标签自己有样式 则不会继承 */
        body {
            font-size: 30px;
            color: red;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <!-- a标签颜色有自己的样式，但是其他都继承 -->
    <a href="#">a标签</a>
    <br>
    <!-- h1有自己的字号其他都继承 -->
    <h1>h1标签</h1>
    <div>div标签</div>
    <p>p标签</p>
    <span>span标签</span>
</body>

3.2 层叠性

特点：

相同的属性会叠盖：后面的CSS覆盖前面的CSS属性

不同的属性会叠加：不同的CSS属性都生效

以相同的选择器为例：

3.3 优先级

也叫权重，一个标签使用了多种选择器，基于不同种类的选择器的匹配规则

公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内选择器 < !important

选中的标签的范围越大，优先级越低

    <style>
        #test {
            color: orange;
        }
        .box {
            color: blue;
        }
        div {
            color: green;
        }
        * {
            color: red !important;
            /* 加上!important使得权重最大 但慎用 */
        }
    </style>
</head>
<body>
    <div class="box" id="test" style="color: purple;">div标签</div>
</body>

叠加计算规则

叠加计算：如果是复合选择器需要权重叠加计算

公式：（每一级之间不存在进位）

（行内选择器，id选择器，类选择器个数，标签选择器个数）

规则：

1. 从左到右依次比较选择的个数，同一级个数多的优先级高，如果个数相同，则向后比较

2. !important 权重最高

3. 继承的权重最低

颜色是：橘色

颜色是：红色

最后的两个都是继承，倒数第二个的!important被继承覆盖

最终颜色是：蓝色

4. Emmet写法

width > w

height > h

w500 > width: 500px;

w500+h300 > width: 500px; height: 300px;

bgc > background-color: XXX;

5. 背景属性

网页中使用背景图实现装饰性的图片效果

背景属性：

5.1 背景图

background-image (bgi)

属性值：url

5.2 平铺方式

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;

            background-image: url(./111.jpg);
            /* 不平铺：左上角显示一张 */
            /* background-repeat: no-repeat; */

            /* 水平平铺 */
            /* background-repeat: repeat-x; */

            /* 垂直平铺 */
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div>div标签</div>
</body>

5.3 背景图位置

一般写法：

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;

            background-image: url(./111.jpg);
            background-repeat: no-repeat;

            /* 0 0 / left top 表示左上角 */
            /* background-position: 0 0; */
            /* background-position: left top; */

            /* right bottom 右下角 */
            /* background-position: right bottom; */

            /* 第一个数字：负数左移 正数右移 */
            /* 第二个数字：负数上移 整数下移 */
            /* background-position: 50px 100px; */

            /* 英文和数字混用 */
            background-position: 50px center;
        }
    </style>
</head>
<body>
    <div>div标签</div>
</body>

特殊写法：

1. 可以颠倒取值顺序

2. 可以只写一个关键字，另一个方向默认为居中

3. 数字只写一个值来表示水平方向，垂直方向居中

比如：bottom left 先垂直方向再水平方向也可以的

5.4 背景图缩放

background-size 设置背景图大小

属性值：

1. 关键字：

— cover 等比例缩放背景图完全覆盖背景区，可能背景图部分看不见

— contain 等比例缩放背景图完全装入背景区，可能背景区部分空白

2. 百分比：根据盒子尺寸计算图片大小

3. 数字 + 单位如px

    <style>
        div {
            width: 500px;
            height: 300px;
            background-color: pink;

            background-image: url(./111.jpg);
            background-repeat: no-repeat;

            /* 1.contain:等比例缩放，图的宽高和盒子尺寸相等，停止缩放，可能导致盒子露白 */
            /* background-size: contain; */

            /* 2.cover:缩放时完全覆盖盒子，会导致图片显示不全 */
            /* background-size: cover; */

            /* 3.100%:图片宽度和盒子宽度一样，图片的高度按照图片比例等比例缩放 */
            background-size: 100%;
        }
    </style>
</head>
<body>
    <div>div标签</div>
</body>

5.5 背景图固定

background-attachment (bga)

背景不会随着元素的内容滚动

属性值：fixed

一般用于大图

    <style>
        body {
            background-image: url(./111.jpg);
            background-repeat: no-repeat;
            background-position: center top;

            /* 让图片不随着滚动条滚动 */
            background-attachment: fixed;
        }
    </style>

5.6 复合属性

background (bg)

属性值：背景色背景图背景图平铺背景图位置/背景图缩放背景图固定

（空格隔开各个属性值，不区分顺序）

    <style>
        div {
            width: 400px;
            height: 400px;

            background: pink url(./111.jpg) no-repeat center bottom/cover;
        }
    </style>