zoukankan      html  css  js  c++  java
  • css优先级汇总

      我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题。

      多重样式优先级:当内联样式、内部样式和外部样式作用于同一个元素时,属于多重样式的范畴。优先级的顺序为内联样式>内部样式>外部样式。

    <head>
    <link href="style.css" rel="stylesheet" type="text/css" />
    /*.color{color:red;}外部样式*/
    <style>/*内部样式*/
    .color{color:black;}
    <style/>
    </head>
    <body>
      <a href="" class="color" style="color:blue">我爱变色</a>
      /*内联样式*/
    </body>
    /*不出意外的话,应该显示为蓝色,前提是内部样式要放在外部样式的后面*/

      选择器的优先权:不同种类的选择器通过权值来计算其优先权的大小。

    权值大小:

    1.内联样式权值最高为[1000];

    2.id选择器权值为[0100];

    3.class、属性、伪类选择器权值为[0010];

    4.元素标签、伪元素选择器权值为[0001];

    5.通用选择器权值为[0000];

    解释:权值是一个4位的数字串,从左到右,一级大于一级,每一级之间没有进制,不可跨越。在进行权值比较的时候,应该从左到由进行比较。

    <style type="text/css">
    .contain .box p{color:red}/*权值:0010+0010+0001=0021*/
    .contain div p{color:black}/*权值:0010+0001+0001=0012*/
    </style>
    <div class="contain">
      <div class="box">
         <p>颜色</p>
      </div>
    </div>
    /*p标签内容应该为红色*/ 

      CSS 优先级法则:

    A  选择器都有一个权值,权值越大越优先;

    B  当权值相等时,后出现的样式表设置要优于先出现的样式表设置;

    C  创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;

    D  继承的CSS 样式不如后来指定的CSS 样式;

    E  在同一组属性设置中标有“!important”规则的优先级最大

    <style type="text/css"> 
        div{background: red !important; background: blue}
    </style> ­
    /*显示为红色,ie6显示为蓝色,在ie6下,!important跟没用是一样的效果*/
  • 相关阅读:
    vue中dom元素和组件的获取
    Vue.js中父子组件之间的传值和传方法
    IDEA中的快捷键
    springmvc中使用controller时,跳转视图会带上外层的地址
    通配符的匹配很全面, 但无法找到元素 'mvc:annotation-driven' 的声明
    vue中的组件
    vuejs
    成员变量(实例变量)&局部变量&静态变量(类变量)的区别
    代码块
    重载&重写
  • 原文地址:https://www.cnblogs.com/wang-jiang/p/4093505.html
Copyright © 2011-2022 走看看