• CSS 的继承性和优先级

    CSS继承： 子标签会继承父标签的某些样式， 如文本颜色和色号

    text-   font-   line- 这些元素开头的可以继承， 以及color属性  

    行高的继承

    1.     <style>
    2.         body {
    3.             color: pink;
    4.             /* font: 12px/24px 'Microsoft yahei'; */
    5.             font: 12px/1.5 'Microsoft yahei';
    6.         }
    7.         div {
    8.             /* 子元素继承了父元素 body 的行高 */
    9.             /* 这个1.5就是当前元素文字大小 font-size 的 1.5 倍， 所以div的行高就是14*1.5=21像        素 */
    10.             font-size: 14px;
    11.         }
    12.         p {
    13.             /* 1.5 * 16 = 24 当前的行高 */
    14.             font-size: 16px;
    15.         }
    16.         /* li 没有指定文字大小 则会继承父亲的文字大小 body 12px 所以li 的文字大小为12px */
    17.         /* 当前 li 的行高就是 12 * 1.5=18  继承父亲的父亲body */
    18.     style>
    19. head>
    20. <body>
    21.     <div>粉红色的回忆div>
    22.     <p>粉红色的回忆p>
    23.     <ul>
    24.         <li>我没有指定文字大小li>
    25.     ul>
    26. body>

    行高可以跟单位也可以不跟单位

    如果子元素没有设置行高， 则会继承父元素的行高 1.5

    此时子元素的行高是： 当前子元素的文字大小*1.5

    body 行高1.5  这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

    CSS 三大特性之优先级

    继承 或者 *                          0，0，0，0

    元素选择器                          0，0，0，1

    类选择器， 伪类选择器       0，0，1，0

    ID选择器                              0，1，0，0

    行内样式 style=""                 1，0，0，0

    ！important 重要的              无穷大

    1.     <style>
    2.         /* 复合选择器会有权重叠加的问题 */
    3.         /* 权重虽然会叠加， 但是不会定位 */
    4.         /* li 的权重是 0，0，0，1 */
    5.         li {
    6.             color: red;
    7.         }
    8.         /* ul li 权重 0，0，0，1+0，0，0，1=0，0，0，2 */
    9.         ul li {
    10.             color: green;
    11.         }
    12.         /* .nav li 权重 0，0，1，0+0，0，0，1=0，0，1，1 */
    13.         .nav li {
    14.             color: pink;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <ul class="nav">
    20.         <li>大猪蹄子li>
    21.         <li>大肘子li>
    22.         <li>猪尾巴li>
    23.     ul>
    24. body>

    div ul li   0,0,0,3

    .nav ul li  0,0,1,2

    a:hover  0,0,1,1

    .nav a     0,0,1,1

    1.     <style>
    2.         .nav {
    3.             color: red;
    4.         }
    5.         继承的权重是0
    6.         li {
    7.             color: pink;
    8.         }
    9.     style>
    10. head>
    11. <body>
    12.     <ul class="nav">
    13.         <li>人生四大悲li>
    14.         <li>家里没宽带li>
    15.         <li>网速不够快li>
    16.         <li>手机没流量li>
    17.         <li>学校没WiFili>
    18.     ul>
    19. body>
    1.     <style>
    2.         /* .nav li 权重是11 */
    3.         .nav li {
    4.             color: red;
    5.         }
    6.         /* 需求： 把第一个小li改成 粉色加粗 */
    7.         /* 权重是 10 */
    8.         /* .pink {
    9.             color: pink;
    10.             font-weight: 700;
    11.         } */
    12.  
    13.         /* .nav 和 .pink 权重都是10 加起来总权重是20 所以变成粉色 */
    14.         .nav .pink {
    15.             color:pink;
    16.             font-weight: 700;
    17.         }
    18.     style>
    19. head>
    20. <body>
    21.     <ul class="nav">
    22.         <li class="pink">人生四大悲li>
    23.         <li>家里没宽带li>
    24.         <li>网速不够快li>
    25.         <li>手机没流量li>
    26.         <li>学校没WiFili>
    27.     ul>
    28. body>

  • 相关阅读:
    设计模式-状态模式
    Syncfusion Essential Studio 23.2.4 V3 SP1 Crack
    美团一面：为什么线程崩溃崩溃不会导致 JVM 崩溃
    【栈】NowCoder-由两个栈组成的队列
    【前端】记录各种控制台警告/bug
    JUC并发编程学习（五）集合类不安全
    C++ opencv 图像读取与显示
    如何提升固态硬盘SSD的寿命？
    和数链技术在能源领域的场景分析
    怎么写好论文引言？
  • 原文地址：https://blog.csdn.net/MOUNTAIN_SEA1/article/details/126229158