• CSS【进阶】

    目录

    一、复合选择器

    二、并集选择器

    三、交集选择器

    四、hover伪类选择器

    五、VScode的Emmet语法

    六、CSS属性：背景相关

    七、元素显示模式

    八、拓展：HTML标签嵌套规范

    九、CSS三大特性

    十、谷歌排错方法

    一、复合选择器

    1.后代选择器

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

    选择器语法： 选择器父 选择器后代 { }

    结果：

    • 在选择器父所找到标签的后代中，找到满足选择器后代的标签

    注意点：

    • 后代包括：儿子、孙子、重孙子........

    • 后代选择器中选择器父和选择器后代之间通过空格隔开

    • 若找不到父选择器，自然后代也找不到 （因此在父多的时候，一定要看仔细了，如果实在不行就debug）

    1. <style>
    2. div p {
    3.     color: red;//div里面的所有p标签都被渲染
    4. }
    5. style>
    6. ​
    7. <p>哈哈哈p>
    8. <div>
    9.     <p>嘎嘎嘎
    10.         <p>顶顶顶顶 p>
    11.     p>
    12. div>
    13. ​
    14. //若删除div标签，则都不被渲染

    2.子代选择器

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

    选择器语法： 选择器父 > 选择器子 { }

    结果：

    • 在选择器父所找到标签的儿子中，找到满足选择器子的标签

    注意：

    • 子，是指儿子只代表第一代儿子

    • 子代选择器中，选择器父和选择器子通过 > 隔开

    • 若找不到父选择器，自然子代选择器也找不到

    1. <style>
    2. div > p{
    3.     color: red;//div标签里面的子p标签被渲染
    4. }
    5. style>
    6. ​
    7. ​
    8. <p>哈哈哈p>
    9. <div>
    10.     <p>嘎嘎嘎
    11.         <p>顶顶顶顶 p>
    12.     p>
    13. div>
    14. ​
    15. ​
    16. //若删除div标签，则都不被渲染

    二、并集选择器

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

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

    结果：

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

    注意：

    • 并集选择器中的每组选择器之间通过 , 隔开

    • 并集选择器中的每组选择器可以是 基础选择器 或 复合选择器

    • 并集选择器中的每组选择器通常一行写一个，提高代码可读性

    1. <style>
    2. a,
    3. span,
    4. div > p{
    5.     color: red;//以上3组选择器选中的标签都被修饰
    6. }
    7. style>
    8. ​
    9. <p>哈哈哈p>
    10. <div>
    11.     <p>嘎嘎嘎
    12.         <p>顶顶顶顶 p>
    13.     p>
    14. div>
    15. ​
    16. <a>点击我a>
    17. ​
    18. <span>得瑟得瑟span>

    三、交集选择器

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

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

    结果：

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

    注意：

    • 交集选择器中的选择器之间是紧挨着的，没有东西分隔

    • 交集选择器中如果有标签选择器，则标签选择器写在最前面

    温馨提示：开发中常用于类名相同且在同一个父里面的情况

    1. <style>
    2.     p.box
    3. style>
    4. ​
    5. <div>
    6. <p class="box">这是'p'p>
    7. <div class="box">这是'div' div>
    8. div>

    四、hover伪类选择器

    作用：选中鼠标 悬停 在标签上的标签

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

    注意：

    • 伪类选择器选中的元素的某种状态

    1. <style>
    2. p:hover{
    3.     color: red;//当鼠标悬停在p标签上面时，字体颜色变为红色
    4. }
    5. style>
    6. ​
    7. <p>悬停选择器p>

    五、VScode的Emmet语法

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

    语法：

    • 标签选择器: div == >

    • 类选择器： .red ==>

    • id选择器： #one ==>

    • 交集选择器： p.red#one ==>

    • 子代选择器： ul>li ==>

    • 创建多个： ul>li*2 ==>

    • 内容文本： ul>li{li的内容} ==>

      • li的内容

    • css属性: 例如 fw ==> font-weight： 以此类推.....

    • css快速: 例如 w200+h100 ==> width: 200,height: 100

    • 以此类推.....

    六、CSS属性：背景相关

    1.背景颜色

    属性名：background-color

    属性值：

    1.颜色单词

    2.rgb( , , ) 、 rbga( , , , )

    3. #16进制数

    1. <style>
    2. div{
    3.     background-color: red;
    4.     background-color: rgb(1,2,3);
    5.     background-color: rgb(1,2,3,0.2);
    6.     background-color: #ccc;
    7. }
    8. style>
    9. ​
    10. ​
    11. <div>背景学习div>

    2.背景图片

    属性名：background-image

    属性值：url('图片的路径')

    1. <style>
    2. div{
    3.     background-image: url('1.jgp');
    4. }
    5. style>
    6. ​
    7. ​
    8. <div>背景学习div>

    3.背景平铺

    用于盒子比背景图片大时，图片该如何填充盒子的方式

    属性名：background-repeat

    属性值：

    repeat 默认值，水平和垂直方向都平铺

    no-repeat 不平铺，最常用

    repeat-x 沿着水平（x轴）方向平铺

    repeat-y 沿着竖直（y轴）方向平铺

    1. <style>
    2. div{
    3.     background-image: url('1.jgp')//盒子300x300，图片100x100,默认垂直和水平平铺了
    4.     background-repeat: no-repeat;//不平铺盒子
    5.     background-repeat: repeat-x;//水平平铺
    6.     background-repeat: repeat-y;//竖直平铺
    7. }
    8. style>
    9. ​
    10. ​
    11. <div>背景学习div>

    4.背景位置

    由于图片插入背景图片且不平铺的情况下，默认为左上角，因此需要改动位置

    属性名：background-position

    属性值： 水平方向位置 垂直方向位置

    1.单词方位

    水平方向:left，center，right

    垂直方向：top，center，bottom

    2.数字+px (坐标)

    以左上角为圆点(0.0)

    x，y坐标

    注意：

    • 方位和坐标可以混用&且超出了盒子的位置不显示&单词方位可以不按顺序来，数字坐标一定要按顺序

    1. <style>
    2. div{
    3.     background-image: url('1.jgp');
    4.     background-repeat: no-repeat;
    5.     background-position: center center;
    6.     background-position: 12px 12px;
    7.     background-position: 10px bottom;
    8.     background-position: left 10px;
    9. }
    10. style>
    11. ​
    12. ​
    13. <div>背景学习div>

    5.复合属性

    属性名：background

    属性值：由这些组合color，image，repeat，position

    1. <style>
    2. div{
    3.     background: red url('1.jpg') no-repeat right bottom;
    4. }
    5. style>
    6. ​
    7. ​
    8. <div>背景学习div>

    6.img标签和background-image属性的区别

    background-image属性作为背景图片，受到盒子限制，不覆盖

    img标签作为图片，不受任何盒子限制，会覆盖

    两个不是一个级别的,按照重要级： img标签 > background-image属性

    七、元素显示模式

    学习元素显示模式的作用：用于网页排版

    1.块级元素

    显示特点：

    1.独占一行(一行只能显示一个)

    2.宽度默认是父元素的宽度

    3.高度默认由内容撑开

    4.可以设置宽度和高度

    代表标签：

    • div、h系列、p、ul、li、ol、li、dl、dt、form、header、nav、footer....

    2.行内元素

    显示特点：

    1.一行可以显示多个,不独占一行

    2.宽度和高度默认由内容撑开

    3.不可以设置宽度和高度

    代表标签：

    • span、a、b、u、i、s、strong、ins、em、del......

    3.行内块

    显示特点：

    1.一行可以显示多个,不独占一行

    2.宽度和高度默认由内容撑开

    3.也可以设置宽度和高度

    代表标签：

    • input、textarea、button、select......

    • 特殊情况：img标签有行内块元素特点，但是Chrome调试器调试工具中显示结果是inline

    4.元素显示模式转换

    目的：改变元素默认显示模式，让元素符合布局要求

    属性：display

    属性值：

    block 转换成块级元素（常用）

    inline 转换成行内元素（少用）

    inline-block 转换成行内块元素（常用）

    1. <style>
    2. div{
    3.     display: inline; //将块模式转换为行内模式
    4. }
    5. span{
    6.     display: inline-block; //将行内模式转换为行内块模式
    7. }
    8. input{
    9.     display: block; //将行内块模式转换为块模式
    10. }
    11. style>
    12. ​
    13. <div>div>
    14. <span>span>
    15. <input type="text">input>

    八、拓展：HTML标签嵌套规范

    规则：

    一般将块级元素作为大容器，来嵌套：文本、块级元素、行内元素、行内块元素....

    注意事项：

    p标签不要嵌套div、p、h等块级元素

    a标签内部可以嵌套任意元素，但是a标签不能嵌套a标签

    九、CSS三大特性

    1.继承性

    特性：子标签有默认继承父标签样式的特点（子承父业）

    常见可以继承的属性（一般是控制文字和文本的属性）

    1.color

    2.font家族

    3.text-indent、text-align

    4.line-height

    5......

    注意：

    • 可以通过调试工具来判断样式是否可以继承

    • 如果标签有浏览器赋予的样式，此时继承仍然存在，但是会失效，例如a标签浏览器赋予蓝色字体（color失效），h系列标签浏览器赋予字体大小（font-size失效)-----优先级的关系

      说白了就是 浏览器赋予的>父继承的

    1. <style>
    2. div{
    3.     color: red; //hhh和ggg都变成红色，span标签文字内容颜色被继承
    4. }
    5. ​
    6. style>
    7. ​
    8. ​
    9. <div>
    10. hhh
    11. <span>ggg<span>
    12. div>

    2.层叠性

    特性：

    1.给同一个标签设置 不同 的样式，此时样式会层层叠加，共同作用在同一标签上

    2.给同一个标签设置 相同 的样式，此时样式会覆盖，写在后面的覆盖前面的

    注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果，也就是说层叠性用于同一级别选择器选中的发生层叠，不同级别的选择器按照高级别选择器为主

    1. <style>
    2. div{
    3.     color: red;
    4.     font-size: 12px;  
    5. }
    6. div{
    7.     color: blue; //覆盖red
    8.     font-weight: 700; //叠加
    9. }
    10. style>
    11. ​
    12. ​
    13. <div>
    14. 大大
    15. <div>
    16. ​

    3.优先性（重点）

    特性：不同类型选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

    优先级公式：

    • 继承<通配符<标签<类

    温馨提示：不需要死记优先级，按照选中的精准度判断即可，越精准的优先级越高

    知识补充： !important

    !important属性值具有提高该属性的优先级，可以将其提高至最高优先级

    • !important写在属性值的后面，分号的前面，例如color: purple !important;

    • !important不能提升继承的优先级，只要是继承优先级就是最低

    • 实际开发中不建议使用!important

    1. <style>
    2. style>
    3. #study{
    4.     color: red; 
    5. }
    6. .stu{
    7.     color: blue;
    8. }
    9. div{
    10.     color: purple !important;//加了!important字体变成紫色
    11. }
    12. *{
    13.   color: green;  
    14. }
    15. body{
    16.     color: yellow;
    17. }
    18. <body>
    19. ​
    20. <div class="stu" id="study" style="color:black;">优先级的学习div>
    21. ​
    22. body>

    权重叠加计算
    我们知道，前面我们只学习了基本选择器的优先级，还没学习多个选择器的优先级，多个选择器的优先级通过权重叠加计算来判断

    场景：如果是多个选择器，此时需要通过权重叠加计算方法，判断哪个复合选择器会生效

    权重叠加公式：（每一级之间不存在进位）

    （ 0 ， 0 ， 0 ， 0 ）

                     行内式个数    id选择器个数   类选择器个数  标签选择器个数

    比较规则：

    先比较第一级数字，如果比较出来了，之后统统不要看，以此类推第二个、第三个、第四个数字

    温馨提示：!important如果不是继承，则权重最高，天下第一，也不用去使用权重计算了

    1. <style>
    2. //(0,1,0,1) 第一
    3. div #one{
    4.     color: orange;
    5. }
    6. //(0,0,2,0) 第二
    7. .father .son{
    8.     color: skyblue;
    9. }
    10. //(0,0,1,1) 第三
    11. .father p{
    12.     color: purple;
    13. }
    14. //(0,0,0,2) 第四
    15. div p{
    16.     color: pink;
    17. }
    18. style>
    19. ​
    20. <div class="father">
    21.     <p class="son" id="one">权重叠加学习p>
    22. div>

    练习题1

    1. <style>
    2. //(0,2,0,0) 第一
    3. #father #son{
    4.     color: blue;
    5. }
    6. //(0,1,1,1) 第二
    7. #father p.c2{
    8.     color: black;
    9. }
    10. //(0,0,2,2) 第三
    11. div.c1 p.c2{
    12.     color: red;
    13. }
    14. //这是继承最低,!important也不生效
    15. #father{
    16.     color: green !important;
    17. }
    18. //这是继承最低
    19. div#father.c1{
    20.     color: yellow;
    21. }
    22. style>
    23. ​
    24. <div id="father" class="c1">
    25.     <p id="son" class="c2">权重叠加练习1p>
    26. div>

    练习题2

    1. <style>
    2. //(0,0,0,2)   //第一
    3. div div{
    4.     color: skyblue;
    5. }
    6. //(0,0,0,1)  //第二
    7. div{
    8.     color: red;
    9. }