zoukankan      html  css  js  c++  java
  • CSS系列 (03):CSS三大特性

    层叠性

    层叠性指的是样式的优先级,当产生冲突时以优先级高的为准,优先级相同时取后面定义的属性样式。

    继承性

    继承性指的是子孙元素可以继承父元素的属性。

    记录一下开发中常用的继承属性:

    • 字体系列
      fontfont-stylefont-weightfont-sizefont-family

    • 文本系列
      text-aligntext-indentline-heightcolor

    • 元素可见性
      visibility

    • 光标属性
      cursor

    优先级

    CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准,specificity用一个四位数来表示,更像四级从左到右,左的最大级,一级大于一级,数位之间没有进制,多个选择符用到同一个元素上时那么specificity上值高的最终获得优先级。

    贡献值

    贡献值 权重
    !important ∞ 无穷大
    内联样式 1,0,0,0
    ID选择器 0,1,0,0
    类选择器,伪类选择器,属性选择器 0,0,1,0
    标签选择器,伪元素选择器 0,0,0,1
    通配符选择器 0,0,0,0

    优先级总结:

    !important > 内联样式 > ID 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器

    注意:

    权重的进制并不是十进制,可以理解为其不会向前进一位,100个类选择器的优先级也小于1个ID选择器 即: 0,0,9,0 < 0,1,00

    栗子

    #nav p : 0,1,0,1

    .nav ul li : 0,0,1,2

    a:hover : 0,0,1,1

    div ul li::after : 0,0,0,4

    !important

    !important规则是一个bug级别的存在,优先级是无穷大。

    一般来说,不要频繁使用!important规则,这是一个坏习惯,除非被逼无奈【老代码中写了很差劲的内联样式或者引用的JavaScript框架中使用了内联样式...】

    参考文档

    HTML中文网 - 如何理解css的层叠性

    HTML中文网 - css优先级算法如何计算

    人间不正经生活手册
  • 相关阅读:
    HttpURLConnection用法详解
    Docker应用场景
    算法1
    Postman 使用详解
    Postman用法简介
    cookie和session
    HTTP简介
    get和post的区别
    git 同步非master分支
    SparseArray类
  • 原文地址:https://www.cnblogs.com/burc/p/14199512.html
Copyright © 2011-2022 走看看