1. 选择器进阶

1.1 复合选择器

1.11 后代选择器：空格

作用： 根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
语法： 选择器1 选择器2{css}
结果： 在选择器1的后代中找到满足选择器2的标签，设置样式
注意点： 后代选择器中，选择器与选择器之间用 空格 隔开

<!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: red;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
    </div>
</body>
</html>

1.21 子代选择器：>

作用： 根据HTML标签的嵌套关系，选择父元素 子代中 满足条件的元素
语法： 选择器1>选择器2{css}.
结果： 在选择器1所找到的标签的子代(儿子)中，找到满足选择器2的标签，设置样式
注意点： 子代只包括儿子；子代选择器中，选择器与选择器之间通过>隔开

<!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>
        /* 只选中儿子 a */
        div>a{
            color:yellow;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>
</html>

1.2 并集选择器：,

作用： 同时选择多组标签，设置相同的样式
语法： 选择器1,选择器2{css}
结果： 找到选择器1和选择器2选中的标签，设置样式
注意点： 每组选择器之间通过,分隔；每组选择器可以是基础选择器或者复合选择器；通常一行写一个，提高代码可读性

<!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>
        /* p div span h1文字颜色为红 */
        p,
        div,
        span,
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <p>pp</p>
    <div>divdiv</div>
    <span>spanspan</span>
    <h1>h1h1</h1>

    <h2>h2h2</h2>
</body>
</html>

1.3 交集选择器：紧挨着

作用： 选中页面中同时满足多个选择器的标签
语法： 选择器1选择器2{css}
结果：（既又原则）找到页面中既能被选择器1 选中，又能被选择器2 选中的标签，设置样式
注意点： 选择器之间紧挨着，无分隔；标签选择器必须写在最前面

<!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>
        p.box{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 找到box类的p标签 -->
    <p>ppppppp</p>
    <p class="box">p标签:box</p>
    <div class="box">div标签:box</div>

</body>
</html>

1.4 :hover伪类选择器

作用： 选中鼠标悬停在元素上的状态，设置样式
语法： 选择器: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>
        a:hover{
            color: red;
            background-color: aquamarine;
        }
        div:hover{
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">超链接</a>
    <div>divdiv</div>
</body>
</html>

1.5 Emmet语法

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

<style>
    /* 提示css属性:单词的首字母 */
    div{
        /* fsz */
        font-size: ;
        /* fw */
        font-weight: normal;
        /* bgc */
        background-color: blue;
        /* 宽度300,高度200,背景色粉色 
        w300+h200+bgc*/
        width: 300px;
        height: 200px;
        background-color: pink;
    }
</style>
<!-- 各自标签 -->
<body>
    <!-- .box -->
    <div class="box"></div>
    <!-- p.box -->
    <p class="box"></p>
    <!-- #box -->
    <div id="box"></div>
    <!-- p#box -->
    <p id="box"></p>
    <!-- p.box#one -->
    <p class="box" id="one"></p>

    <!-- div>p -->
    <div>
        <p></p>
    </div>

    <!-- ul>li*2 -->
    <ul>
        <li></li>
        <li></li>
    </ul>

    <!-- ul>li{111}*3 -->
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>

    <!-- ul>li{$}*3 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

2. 背景相关属性

2.1 背景颜色

属性名： background-color（bgc）
属性值： 颜色取值——关键字、rgb表示法、十六进制
注意点：
- 背景颜色默认值是透明：rgba(0,0,0,0)/a表示透明度、transparent
- 不影响盒子大小，并且有助于看清其大小和位置，一般先设置背景颜色

2.2 背景图片

属性名： background-image（bgi）
属性值： backgroud-image:url('图片路径')；
注意点： url可以省略引号；bgi默认在水平和垂直方向平铺；装饰效果，类似于背景颜色

2.3 背景平铺

属性名： background-repeat（bgr）
属性值：

取值	效果
`repeat`	(默认值)水平和垂直方向都平铺
`no-repeat`	不平铺
`repeat-x`	沿水平方向(x轴)平铺
`repeat-y`	沿垂直方向(y轴)平铺

2.4 背景位置

属性名： background-position（bgp）
属性值： background-position: 水平方向位置垂直方向位置;
注意点： 方位名词取值和坐标取值可以混用

2.5 背景相关属性的连写形式

属性名： background（bg）
属性值： background:color image repeat position
注意点：
- 空格隔开；可以按需省略；可以颠倒顺序（位置是px坐标表示时不可）
- 特殊情况：盒子大小和背景图片大小一样，此时可以直接写background：url()
- 如果需要设置单独的样式和连写，可以把单独的样式写在连写的下面或里面

2.6 img标签和背景图片的区别

img标签： 不设置宽高默认会以原尺寸显示
div标签+背景图片： 因为背景图片只是装饰的css样式，需要设置div的宽高

3. 元素显示模式

3.1 块级元素

显示特点：
1. 独占一行（一行只能显示一个）
2. 宽度默认是父元素的宽度，高度默认由内容撑开
3. 可以设置宽高
代表标签： div、p、h系列，ul、li、dl、dt、dd、form、header、nav、footer...

3.2 行内元素

显示特点：
1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 不可以设置宽高
代表标签： a、span，b、u、i、s、 strong、ins、em、del...

3.3 行内块元素

显示特点：
1. 一行可以显示多个
2. 可以设置宽高
代表标签： img，input、textarea、button、select...

3.4 元素显示模式切换

目的： 改变元素默认的显示特点，让元素符合局部要求
语法：

属性	效果	使用频率
`display:block`	转换成块级元素	较多
`display:inline-block`	转换成行内块元素	较多
`display:inline`	转换成行内元素	较多

3.5 嵌套规范注意点

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等
p标签中不要嵌套div、p、h等块级标签
a标签内部可以嵌套任意元素，但不能嵌套a标签

4. CSS特性

4.1 继承性

特性： 子元素默认继承父元素样式的特点
控制文字的属性都可以继承；不是控制文字的都不能继承
注意点： 可以通过调试工具判断样式是否可以继承
继承失效的特殊情况： a标签的color；h系列标签的font-size

4.2 层叠性

特性：
1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
注意点： 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

4.3 优先级

特性： 不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式： 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意点：
1. !important写在属性值的后面，分号的前面
2. !important不能提升继承的优先级，只要是继承优先级最低
3. 实际开发中不建议使用 !important

权重叠加计算

场景： 如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式：

级别	第一级	第一级	第一级	第一级
形式：	0	0	0	0
复合选择器中：	行类样式的个数	id选择器的个数	类选择器的个数	标签选择器的个数

比较规则： 从第一级开始依次比较；如果最终所以数字都相同表示优先级相同，则比较层叠性
注意点： !important如果不是继承，则权重最高

5. 综合案例

<!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>
</head>
<style>
    a{
        text-decoration: none;     /* 去下划线 */
        width: 100px;
        height: 50px;
        background-color: red;
        display: inline-block;     /* a显示模式 行内 转 行内块 */
        color: #fff;
        text-align: center;
        line-height: 50px;
    }

    a:hover{
        background-color: orange;
    }
</style>
<body>
    <!-- a*5 -->
    <!-- 选多行内容增减alt+shift+左键单击 -->
    <a href="#" class="one">导航1</a>
    <a href="#" class="two">导航2</a>
    <a href="#" class="three">导航3</a>
    <a href="#" class="four">导航4</a>
    <a href="#" class="five">导航5</a>
</body>
</html>

CSS进阶 | 青训营笔记

1. 选择器进阶

1.1 复合选择器

1.11 后代选择器：空格

1.21 子代选择器：>

1.2 并集选择器：,

1.3 交集选择器：紧挨着

1.4 :hover伪类选择器

1.5 Emmet语法

2. 背景相关属性

2.1 背景颜色

2.2 背景图片

2.3 背景平铺

2.4 背景位置

2.5 背景相关属性的连写形式

2.6 img标签和背景图片的区别

3. 元素显示模式

3.1 块级元素

3.2 行内元素

3.3 行内块元素

3.4 元素显示模式切换

3.5 嵌套规范注意点

4. CSS特性

4.1 继承性

4.2 层叠性

4.3 优先级

5. 综合案例