css优先级问题总结

最新推荐文章于 2023-10-02 21:44:00 发布

言多_必失

最新推荐文章于 2023-10-02 21:44:00 发布

阅读量623

点赞数 1

本文链接：https://blog.csdn.net/fly_xiaoyou2015/article/details/39062023

版权

最近一直在抽空温习css，一点点做些总结归类。

引入CSS的方法有两种，一种是@import，一种是link

@import url('地址');

现在绝大部分的网站都采用后一种link方式，原因在于@import先加载HTML，后加载CSS

link先加载CSS，后加载HTML。

所以前者加载网页会出现令浏览者以外的格式，后者则是带格式的加载网页。

这也说明了@improt方式引入的样式的优先级要比link方式的大。

总体来说，样式表优先级如下:

多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。

一般情况下，优先级如下：

内联样式（在html元素内部）> 页面内样式（位于<head>标签内部） > @Improt引入的样式 > <link>引入的样式 > 浏览器缺省设置

有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将把内部样式覆盖掉。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  
     <style>
         p {
             color:red;
         }
    </style>
      <link href="test.css" rel="stylesheet" />
</head>
   
<body>
    <p>
        测试
    </p>
</body>
</html>

css:

p {
    color:green;
}

会看到字体显示绿色，也证实了这一点。

接下来说说样式表内选择器的优先级

以下内容出自http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html

学习总结为主，尊重劳动成果。

选择器的优先权

解释：

1. 内联样式表的权值最高 1000；

2. ID 选择器的权值为 100

3. Class 类选择器的权值为 10

4. HTML 标签选择器的权值为 1

利用选择器的权值进行计算比较，示例如下：

 
  <html>
   <head>
     <style type="text/css">
         #redP p {
              /* 权值 = 100+1=101 */
              color:#F00;  /* 红色 */
         }
  
         #redP .red em {
              /* 权值 = 100+10+1=111 */
              color:#00F; /* 蓝色 */
  
         }
  
         #redP p span em {
              /* 权值 = 100+1+1+1=103 */
              color:#FF0;/*黄色*/
         }
     </style>
   </head>
   <body>
      <div id="redP">
         <p class="red">red
            <span><em>em red</em></span>
         </p>
         <p>red</p>
      </div>
   </body>
 </html>
 

结果：<em> 标签内的数据显示为蓝色。

CSS 优先级法则：

A 选择器都有一个权值，权值越大越优先；

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

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

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

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

 
  <html>
   <head>
     <style type="text/css">
      #redP p{
         /*两个color属性在同一组*/
         color:#00f !important; /* 优先级最大 */
         color:#f00;
      }
     </style>
   </head>
   <body>
      <div id="redP">
        <p>color</p>
        <p>color</p>
      </div>
   </body>
 </html>
 