CSS样式优先级与权重计算方式

原创 2016年03月18日 08:56:08

CSS一共有四种样式控制方式:行内样式、内嵌样式、链接样式、导入样式(@import).选择器则有标签选择器,类名选择器,ID选择器,和伪标签选择器四种.那么它们的优先级与权重又是计算的呢?

首先上权重计算方法:

一.内联 > id > class >标签

权重计算数值

1.内联样式        1000
2.id样式          0100
3.class样式       0010   hover,nth-child()等CSS3"伪标签"权重与"真-class"相同;
4.标签样式        0001

以后是权重计算数值,也就是说,ul li a{}中的样式,将会比li a{}级别更高,因而

<ul>
    <li>
        <a>test</a>
    </li>
</ul>


<style>
 ul li a{   //权重等于0003
     color:red
 }

li a{   //权重等于0002
    color:blue
}
</style>

中的test字体颜色将会是红色而非蓝色.当样式设置位于同一种样式控制方式,比如全为链接时候,将会后者覆盖前者(CSS叠加样式表是进行样式的不断叠加,因而同一权重,后者会覆盖前者).

二,同权重,样式设置方式不同

而当样式设置权重相同但位于不同样式设置方式时,将会按照
行内样式>内嵌样式>链接样式.进行样式叠加.也就是说

假如

<ul>
    <li>
        <a>test</a>
    </li>
</ul>


<style>
 ul li a{   //权重等于0003,但是位于链接样式中
     color:red
 }

ul li a{   //权重等于0003,但是位于内嵌样式中
    color:blue
}
</style>

而这一次,test文字的字体颜色将为蓝色.

三.导入样式(@import)与内嵌样式

至于导入样式(@import)则是将其导入到内嵌样式中,故而其优先级与内嵌样式相同,同样符合叠加原理,或者说就近原则.

<link href="test.css" type="text1/css" rel="stylesheet">
    <title>新建网页标题</title>
    <style>
        @import "test2.css";
    </style>
</head>
<body>

// 此时同权重样式会显示"@import中的",而非"<link/>"中的


    <title>新建网页标题</title>
    <style>
        @import "test2.css";
    </style>
    <link href="test.css" type="text1/css" rel="stylesheet">
</head>
<body>

// 此时同权重样式会显示"<link/>中的,而非@import"中的

四,测试声明

本文所言均已经经过本人测试,而本文则是为了整理以往的网络材料,并修正其他前辈们的一些错误,如果你发现了本文中的一些错误,遗漏或者对此有什么疑问,请在博文下方留言,本人会及时回复.以下是本人的测试环境.

本文章中测试环境,如下:

谷歌版本: 50.0.2652.2 (64-bit);

Opera:36.0.2130.32 ,Windows 10 64-bit (WoW64);

火狐:44.0.2;

IE:11.162.10586.0;
版权声明:转载请标明出处:http://blog.csdn.net/fontthrone

相关文章推荐

CSS样式的优先级和权重

1、相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。   2、...

Css 学习笔记--样式引入方式及按权重判断优先级

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。 从CSS 样式代码插入的形...

深入解析CSS样式层叠权重值

读到《重新认识CSS的权重》这篇,鬼哥在文章最后给出了便于记忆的顺序:“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”。那么这...

深入解析CSS样式层叠权重值

读到《重新认识CSS的权重》这篇,鬼哥在文章最后给出了便于记忆的顺序:“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”。那么这个顺...

CSS从基础到熟练学习笔记(一)引入CSS样式的三种方式以及多种样式的优先级

CSS是一种样式表语言,描述了一个HTML(或XML)文档演示。CSS描述了元素是怎样渲染到屏幕、纸上或其他媒体的。内部样式和外部样式的定义顺序(引入顺序)决定了优先级高低,后指定的优先级高;内联样式...

css样式中的class,style与id的优先级问题

在写css样式的时候我们要注意的有顺序问题,更重要的时候style,class与id之间的优先级问题,在页面初次完工未经改变,或者页面复杂程度很小的时候,搞不清楚这三者之间的优先级问题,似乎并没有什么...

CSS样式选择器的优先级顺序

样式(css)是一种按照优先级来进行加载的语言。 css各种选择器的优先级顺序:(由上到下,优先级顺序依次降低) 不同级别: 1.在属性后面使用 !important 会覆盖页面内任何位置定义的...

CSS样式优先级

有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)