• CSS的三大特性

    🍓个人主页：bit.. 

    🍒系列专栏：Linux(Ubuntu)入门必看   C语言刷题      数据结构与算法  HTML和CSS3

    目录

    1.1层叠性

    1.2继承性

    1.3优先级

    CSS的三大特性：层叠性，继承性，优先级。

    1.1层叠性

            相同选择器给设置相同的样式，此时一个相同的样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突问题。

    层叠性原则：

    • 样式冲突遵循的原则就是究竟原则，那个样式离结构近，就执行那那个样式。
    • 样式不冲突，不会叠加。
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         div {
    11.             font-size: 18px;
    12.         }
    13.         
    14.         div {
    15.             color: pink;
    16.         }
    17.     style>
    18. head>
    19.  
    20. <body>
    21.     <div>C罗div>
    22. body>
    23.  
    24. html>

     1.2继承性

    CSS中的继承性:子标签会继承父标签的某些此样式，如文本的颜色和字号，简单理解：子承父业

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         div {
    11.             color: pink;
    12.             font-size: 18px;
    13.         }
    14.         /* div {
    15.             color: pink;
    16.         } */
    17.     style>
    18. head>
    19.  
    20. <body>
    21.     <div>
    22.         <p>C罗p>
    23.     div>
    24. body>
    25.  
    26. html>
    • 恰当的使用继承可以简化代码，降低CSS的复杂性。
    • 子元素可以继承父元素的样式（text-,font-,line- 这些元素开头的可以继承，以及color属性）
    • 继承性的口诀：龙生龙，凤生凤，老鼠生的孩子会打洞。

    行高的继承性：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         /* div {
    11.             color: pink;
    12.             font-size: 18px;
    13.         } */
    14.         /* div {
    15.             color: pink;
    16.         } */
    17.         
    18.         body {
    19.             font: 12px/1.5 Microsoft YaHei;
    20.         }
    21.     style>
    22. head>
    23.  
    24. <body>
    25.     <div>
    26.         <p>C罗p>
    27.         <p>梅西输了p>
    28.     div>
    29. body>
    30.  
    31. html>
    • 行高可以跟单位也可以不跟单位。
    • 如果子元素没有设置行高，则会继承父元素的行高为1.5
    • 此时子元素的行高是：当前元素的文字大小*1.5
    • body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

    1.3优先级

    • 当同一个元素指定多个选择器就会由优先级产生。
    • 选择器相同，则执行层叠性。
    • 选择器不同，则根据选择器权重执行

    选择器权重：

    选择器选择器权重
    继承或者*0,0,0,0
    元素选择器0,0,0,1
    类选择器，伪类选择器0,0,1,0
    Id选择器0,1,0,0
    行内选择器 style=" "1,0,0,0
    !important  重要性无穷大

     注意点：

    1. 权重是由四组数字组成，但不会有进位。
    2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器。
    3. 等级判断，从左向右，如果某一位数值相同，则判断下一位数值。
    4. 可以简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器10，id选择器为100，行类样式为1000，！important 无穷大。
    5. 继承的权重为0，如果该元素没有直接选中，不管父元素权重多高,子元素得到的权重都是0。

     权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重多高

    • div  ul  li  ——> 0,0,0,3
    • a:hover ——>0,0,1,1
    • .nav ul li ——>0,0,1,2
    • .nav a ——> 0,0,1,1
  • 相关阅读:
    【综合类型第 35 篇】程序员的七夕浪漫时刻
    VUE(0) : vue-element-admin[0] : 常用语法
    Java审计对比工具JaVers使用
    git stash详解
    JMeter 调试取样器（Debug Sampler）简介
    LeetCode 接雨水 双指针
    NRF52840 SOC 在空气净化市场应用的发展趋势
    刷题笔记day04-链表
    C# 编写一个简单易用的 Windows 截屏增强工具
    简单说说关于shell中zsh和bash的选择
  • 原文地址：https://blog.csdn.net/weixin_68773927/article/details/128050835