码迷,mamicode.com
首页 > Web开发 > 详细

写给初学者css优先级问题

时间:2015-11-09 01:27:55      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

首先需要搞清楚几个基本概念
  1.内嵌样式:
    写在元素标签内的例如:<div style="background-color:red"> </div>
  2.内联样式:
    写在head的style例如:<head>
                  <style>
                      div{
                          background-color:red;
                        }
                  </style>
               </head>
  3.外部样式:
    link标签引入进来的例如:<link rel="stylesheet" href="1.css"/>
4.important:只要设置了important的优先级永远最高。例如:border:1px solid red !important;  
  优先级:!important > 内嵌(标签内)> 内联(style)=外部;
说明:这里很多初学者都会误会内联优先级要高与外部,实际上是相等的。例如:
    <head>
        <link rel="stylesheet" href="1.css"/>//名为1的css文件中有div{background:blue;}
        <style>
          div{
              background-color;red;
         }
       </style>
    </head>
    
此时div的背景色为red;
    <head>
        <style>
          div{

              background-color;red;
         }
       </style>
       <link rel="stylesheet" href="1.css"/>//名为1的css文件中有div{background:blue;}
    </head>
    此时div的背景色为blue;
选择器权重值:内嵌:1000;
    id:0100;
    class或伪类:0010;
    元素或伪元素:0001;
    *:0000;
说明:权重值越大优先级越高;权重值可以累加,但是不会越位,例如:
    嵌套十层div,然后有一个div元素选择器,该选择的权重值为000 10,而不是0010,仍旧比class或伪类选择器的权重值小。
权重值:内嵌(1000)>id(0100)>class/伪类(0010)>元素/伪元素(0001)> * 权重值越高优先级越高。 important永远最高

写给初学者css优先级问题

标签:

原文地址:http://www.cnblogs.com/kk-yu/p/4948801.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!