css特性

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
 
posted @   YBYZ  阅读(22)  评论(0)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示