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

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

[1. 复合选择器](#1. 复合选择器)

[1.1 后代选择器](#1.1 后代选择器)

[1.2 子代选择器](#1.2 子代选择器)

[1.3 并集选择器](#1.3 并集选择器)

[1.4 交集选择器](#1.4 交集选择器)

[2. 伪类选择器](#2. 伪类选择器)

[2.1 超链接（拓展）](#2.1 超链接（拓展）)

[3. CSS特性](#3. CSS特性)

[3.1 继承性](#3.1 继承性)

[3.2 层叠性](#3.2 层叠性)

[3.3 优先级](#3.3 优先级)

叠加计算规则

[4. Emmet写法](#4. Emmet写法)

[5. 背景属性](#5. 背景属性)

[5.1 背景图](#5.1 背景图)

[5.2 平铺方式](#5.2 平铺方式)

[5.3 背景图位置](#5.3 背景图位置)

[5.4 背景图缩放](#5.4 背景图缩放)

[5.5 背景图固定](#5.5 背景图固定)

[5.6 复合属性](#5.6 复合属性)

[6. 显示模式](#6. 显示模式)

[6.1 块级元素](#6.1 块级元素)

[6.2 行内元素](#6.2 行内元素)

[6.3 行内块元素](#6.3 行内块元素)

[6.4 转换显示模式](#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选择器，类选择器个数，标签选择器个数）

规则：

从左到右依次比较选择的个数，同一级个数多的优先级高，如果个数相同，则向后比较
!important 权重最高
继承的权重最低

颜色是：橘色

颜色是：红色

最后的两个都是继承，倒数第二个的!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>

特殊写法：

可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中
数字只写一个值来表示水平 方向，垂直方向居中

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

5.4 背景图缩放

background-size 设置背景图大小

属性值：

关键字：

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

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

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

数字 + 单位如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标签

</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>