• CSS的三大特性

    层叠性原则：如果设置了两个相同的样式，默认执行最后设置的样式，且只是不执行相同的样式，没有的样式一样执行

    例题：

    1. <head>
    2.  
    3.     <meta charset="UTF-8">
    4.  
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.  
    7.     <title>Documenttitle>
    8.  
    9.     <style>
    10.  
    11.         div {
    12.  
    13.             color: red;
    14.  
    15.             font-size: 16px;
    16.  
    17.         }
    18.  
    19.     style>
    20.  
    21. head>
    22.  
    23.  
    24.  
    25. <body>
    26.  
    27.     <div>
    28.  
    29.         <p>龙生龙，凤生凤。儿子继承父亲的样式p>
    30.  
    31.     div>
    32.  
    33. body>
    34.  
    35.  
    36.  
    37. html>

    运行结果：

    例题：

    1. <title>行高的继承title>
    2.  
    3.     <style>
    4.  
    5.         body {
    6.  
    7.             color: pink;
    8.  
    9.             /* 这里的1.5表示 行高=字体大小的1.5倍 */
    10.  
    11.             font: 12px/1.5 'Microsoft YaHei';
    12.  
    13.         }
    14.  
    15.         
    16.  
    17.         div {
    18.  
    19.             /* 子元素继承了父元素body 的行高 1.5 */
    20.  
    21.             /* 这个1.5 就是当前元素字体大小 font-size 的1.5倍  所以当前div 的行高就是21像素 */
    22.  
    23.             font-size: 14px;
    24.  
    25.         }
    26.  
    27.         
    28.  
    29.         p {
    30.  
    31.             /* 1.5 * 16= 24 像素 当前的行高 */
    32.  
    33.             font-size: 16px;
    34.  
    35.         }
    36.  
    37.         /* li 没有手动指定文字大小  则会继承父亲的 文字大小 body 是12px 所以 li 的文字大小为 12px
    39.          当前 li 的行高就是 12 * 1.5= 18像素
    41.          */
    42.  
    43.     style>
    44.  
    45. head>
    46.  
    47.  
    48.  
    49. <body>
    50.  
    51.     <div>
    52.  
    53.         我很帅很帅
    54.  
    55.     div>
    56.  
    57.     <p>丑八怪就是你啊p>
    58.  
    59.     <ul>
    60.  
    61.         <li>我没有指定文字大小li>
    62.  
    63.     ul>
    64.  
    65. body>

    运行结果：

    例题：

    1. <head>
    2.  
    3.     <meta charset="UTF-8">
    4.  
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.  
    7.     <title>行高的继承title>
    8.  
    9.     <style>
    10.  
    11.         /* 优先级1最高，谁最高就用谁的样式 */
    12.  
    13.         /* 类选择器优先级4 */
    14.  
    15.         
    16.  
    17.         .test {
    18.  
    19.             color: red;
    20.  
    21.         }
    22.  
    23.         /* 元素选择器 优先级5 */
    24.  
    25.         /* 当属性后面加上了 !important 该优先级为1 */
    26.  
    27.         
    28.  
    29.         div {
    30.  
    31.             color: pink!important;
    32.  
    33.         }
    34.  
    35.         /* id选择器 优先级3 */
    36.  
    37.         
    38.  
    39.         #deee {
    40.  
    41.             color: green;
    42.  
    43.         }
    44.  
    45.     style>
    46.  
    47. head>
    48.  
    49.  
    50.  
    51. <body>
    52.  
    53.     
    54.  
    55.     <div class="test" id="deee" style="color: purple;">css的优先级特性div>
    56.  
    57. body>

    1. 例题：
    2.  
    3. <title>行高的继承title>
    4.  
    5.     <style>
    6.  
    7.         /* 父亲的权重为100 */
    8.  
    9.         #id {
    10.  
    11.             color: red;
    12.  
    13.         }
    14.  
    15.         /* 儿子 p 继承的权重为0 */
    16.  
    17.         p {
    18.  
    19.             color: pink;
    20.  
    21.         }
    22.  
    23.     style>
    24.  
    25. head>
    26.  
    27.  
    28.  
    29. <body>
    30.  
    31.     <div id="di">
    32.  
    33.         <p>丹丹宝贝，我爱你！p>
    34.  
    35.     div>
    36.  
    37. body>

    运行结果：

    1. 例题：
    2.  
    3. <head>
    4.  
    5.     <meta charset="UTF-8">
    6.  
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.  
    9.     <title>权重的计算title>
    10.  
    11.     <style>
    12.  
    13.         /* 复合选择器有权重叠加的问题 
    15. 权重虽然会叠加，但是永远不会有进位*/
    16.  
    17.         /* ul li 权重是 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
    18.  
    19.         
    20.  
    21.         ul li {
    22.  
    23.             color: green;
    24.  
    25.         }
    26.  
    27.         /* li 的权重是 0,0,0,1 */
    28.  
    29.         
    30.  
    31.         li {
    32.  
    33.             color: red;
    34.  
    35.         }
    36.  
    37.         /* .idi li 的权重是 0,0,1,0  +  0,0,0,1  =0,0,1,1 */
    38.  
    39.         
    40.  
    41.         .idi li {
    42.  
    43.             color: peru;
    44.  
    45.         }
    46.  
    47.         /* 因为11>2>1 所以执行复合选择器的颜色属性 */
    48.  
    49.     style>
    50.  
    51. head>
    52.  
    53.  
    54.  
    55. <body>
    56.  
    57.     <ul class="idi">
    58.  
    59.         <li>红烧猪蹄li>
    60.  
    61.         <li>鱼香肉丝li>
    62.  
    63.         <li>茄汁炒肉li>
    64.  
    65.     ul>
    66.  
    67. body>

    运行结果：

  • 相关阅读:
    38-Jenkins-Publish over SSH插件实现远程部署
    组件通信的方法
    RPC是什么？RPC与HTTP的关系
    Docker
    nginx 动静分离 防盗链
    在Jetson Xavier NX 开发板上使用VScode执行ROS程序详细过程
    基于java（ssm）大学生社团管理系统源码成品（java毕业设计）
    携手聚力 共赢数智未来丨物通博联招募生态合作伙伴
    ChatGPT强势爆红，背后的技术原理是？一文轻松搞懂！
    Hadoop1_hadoop概览
  • 原文地址：https://blog.csdn.net/qq_48516121/article/details/126874683