css特性

2022-08-02 23:00:10 作者：互联网

css特性

继承性

子元素继承父元素样式的特点

//继承常见的属性
文字属性都可以继承
color
font-style，font-weight，font-size，font-family
text-indent，text-align
line-height
list-style
....
//通过调试工具可以判断是否可以继承

好处:在一定程度上减少代码

应用：

给ul设置list-style:none；去除默认的小圆点样式
给body设置统一的font-size的样式，统一不同浏览器的默认文字大小（移动端）

继承性失效问题

<style>
      .main {
        font-size: 14px;
      }

      .box {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 元素有浏览器默认的样式，继承性依然存在，但是优先显示浏览器默认样式
     1: h标题系列的标签，font-size会继承失效
     2：a标签color会继承失效
    -->

    <div class="main">
      我是h3标记
      <!-- 浏览器默认的字体大小样式 把继承的font-size给覆盖了 -->
      <h3>我是h3标记</h3>
    </div>

    <div class="box">
      box标记
      <a href="#">超链接</a>
    </div>

层叠性

<style>
      p {
        color: red;
      }
      .main p {
        
        
        /* 层叠覆盖 */
      }
      /* 以上两个样式共同作用域p标记 层叠性 */
    </style>
  </head>
  <body>
    <div class="main">
      div标记
      <p>p标记</p>
    </div>
  </body>

优先级

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

!important 写在属性值的后面 分号的前面
!important提升不了继承的优先级，只要是继承优先级是最低
实际开发中不建议使用!important

标签：style,标记,继承,特性,important,font,css,size
来源： https://www.cnblogs.com/YBYZ/p/16545490.html