zoukankan      html  css  js  c++  java
  • 关于css优先级

    css的优先级从低到高依次是:内部样式表的优先级为(1,0,0,0),id选择器优先级为(0,1,0,0),class选择器为(0。0,1,0),tag标签为(0。0,0,1)。除此之外,!important权重最高,比inline style还要高。

    从字面意思就知道它最重要。

    在这里插个题外话。

    我之前一直错误的以为!important仅仅是css hack的一个写法。

    我印象中!important是号称支持到ie7及以上的,不支持ie6的。不知道人没有也这么觉得。。。直到今天我才意识到我的错误。事实上在我知道了!important能够改变css优先级的的时候还知道了ie6也是认识!important的。仅仅只是IE6读取含有!important'的css属性是顺序读取的。这是IE6的一个非常典型的bug。比方:

    <style type="text/css"> 
          div{
                background: red !important; 
                background: blue;
          }
    </style> ­

    这个结果是div的背景为blue;假设这样:

    <style type="text/css"> 
            div{
                 background: blue; 
                 background: red !important; 
            }
    </style> ­

    把两个属性倒换位置。结果背景为red。这说明IE6并不会对!important开放特权。

    而是一视同仁。

    比如:

    情形一:div.test1 .span a 优先级 (0,0,2,2)。
    情形二:span#xxx .songs li 优先级(0,1,1,2);

    情形三:#xxx li 优先级 100 +1 (0,1,0。1);

    直接上代码:

    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		div .aa{color:orange;}/*(0,0,1。1)*/
    		.bn .aa{color:red;}/*(0。0。2,0)*/
    		#bb .aa{color:yellow;}/*(0。1,1,0)*/
    		#bb a{color:blue;}/*(0,1,0,1)*/
    	</style>
    </head>
    <body>
    	<div id="bb" class="bn">
    		<a style="color:gray;" href="#" class="aa">link</a>
    	<div>
    </body>
    </html>

    代码运行后,link字体的颜色为gray,由于内部样式表的优先级最高。为(1,0,0。0)

    可是假设。给div .aa{color:orange!important;}这样一个属性,那么link字体的颜色就是orange了。

  • 相关阅读:
    【随机梯度下降】理解与使用
    【线性回归】波士顿房价预测
    【knn临近算法】预测年收入
    【knn近邻算法】算法实现的简单原理
    【线性回归算法】小案例之确诊病例数据预测(只用于理解预测算法理解)
    【前端】H5,底边按钮吸边,但是覆盖了列表循环的内容
    【Django组件】WebSocket的简单实现
    vue基础知识点
    ES6---Proxy的理解的使用
    Python 整数拆分
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/8877631.html
Copyright © 2011-2022 走看看