首页 / CSS / 通过优先级对比验证CSS控制样式的三种方式

通过优先级对比验证CSS控制样式的三种方式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了通过优先级对比验证CSS控制样式的三种方式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8451字，纯文字阅读大概需要13分钟。

内容图文

这篇文章主要介绍了关于通过优先级对比验证CSS控制样式的三种方式，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

大家都知道，CSS的中文名叫做层叠样式表，而CSS在控制样式的时候，有三种引入方式,这里简单介绍下CSS控制样式的三种方式

好了，直入主题，大家都知道，CSS的中文名叫做层叠样式表，而CSS在控制样式的时候，有三种引入方式，分别是：

1>外部样式表 : 将样式规则直接写在*.css文件中，然后再*.html页面中通过<link>标签引入的方式
2>内部样式表 :（位于 <head> 标签内部）
3>内联样式 :（在 HTML 元素内部）

按照W3School网站(点这里直达)的说法，当同一个 HTML 元素被不止一个样式定义时，它们是有优先级之分的，如下，将优先级从小到大排列出来，其中4的优先级最高：

1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）

对于这个结论，相信大家一定有很多疑问，而网上很多都是直接对官网的内容进行复制然后粘贴发布就算了，让我们非常厌倦和烦恼，所以，在这里让我们一起来验证对比下。

注意：本次验证主要针对后面3个优先级，关于浏览器缺省设置这个，相信大家都知道，他一定是最低的，我们在此就不过多的举例验证了。

一、验证环境的描述

浏览器：FireFox 22.0
语言：HTML 4.01/CSS
开发工具:Aptana Studio 3

二、使用三种方式直接对标签进行元素定义样式
1>首先，我们先直接使用外部样式表来定义p标签的样式：

xiaoxuetu.css

p {
     color:blue
 }

xiaoxuetu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>CSS样式表优先级测试</title>
        <meta charset="UTF-8" /></p>
<p>        <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    </head>    
    <body>
        <p>外部样式表</p>
    </body>
</html>

显示效果：

通过优先级对比验证CSS控制样式的三种方式 - 文章图片

下面我们开始验证吧。

2>外部样式表 VS 内部样式表（先定义内部样式表，再引入外部样式表定义文件）加入内部样式表，也就是说，直接在<head>标签中定义样式规则，这个时候我们修改一下xiaoxuetu.html中的代码：

xiaoxuetu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>CSS样式表优先级测试</title>
        <meta charset="UTF-8" />
        <style type="text/css" media="screen">
            p {
                color: green
            }
        </style>
        <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    </head>    
    <body>
        <p>外部样式表(蓝色) VS 内部样式表(绿色)</p>
    </body>
</html>

显示效果：
通过优先级对比验证CSS控制样式的三种方式 - 文章图片

得出优先级结果：外部样式表 > 内部样式表

3>外部样式表 VS 内部样式表（先引入外部样式表定义文件，再定义内部样式表）这步很简单，其实就是直接将link标签剪切移动到上面到head标签中定义内部样式表的前面：

xiaoxuetu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/> 
<style type="text/css" media="screen"> 
p { 
color: green; 
} 
</style> 
</head> 
<body> 
<p>外部样式表(蓝色) VS 内部样式表(绿色)</p> 
</body> 
</html>

显示效果：

通过优先级对比验证CSS控制样式的三种方式 - 文章图片

得出优先级结果：内部样式表 > 外部样式表

从<2>和<3>这两部测试我们可以知道，在直接对标签的样式进行定义时，外部样式表和内部样式表的优先与他们的引入顺序有关,嘿嘿，是不是很庆幸没有完全相信官网所说的咧……

4>外部样式表 VS 内联样式直接在p标签中定义样式，这个时候我们修改下xiaoxuetu.html的代码：

xiaoxuetu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/> 
</head> 
<body> 
<p style="color:red;">外部样式表(蓝色) VS 内联样式(红色)</p> 
</body> 
</html>

显示效果：

通过优先级对比验证CSS控制样式的三种方式 - 文章图片

得出优先级结果：内联样式 > 外部样式表

5>内联样式 VS 内部样式表，这个时候我们修改下xiaoxuetu.html代码：

xiaoxuetu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<style type="text/css" media="screen"> 
p { 
color: green 
} 
</style> 
</head> 
<body> 
<p style="color:red;">内部样式表(绿色) VS 内联样式(红色)</p> 
</body> 
</html>

显示效果：

通过优先级对比验证CSS控制样式的三种方式 - 文章图片

得出优先级结果：内联样式 > 内部样式表

从上面步骤<2>到<5>的对比中我们可以知道:内部样式的优先级是最大的，而内部样式表和外部样式表的优先级得看他们的引入和定义顺序，如果先用内部样式表定义了样式，然后再引入通过外部样式表定义的样式，你们外部样式表的样式将会覆盖内部样式表定义的样式，反之亦是一样。

当然，这个情况只是用id或者class选择的时候，也是一样的。如果对一个标签的样式定义既有class也有id选择器的时候，同时又包含了三种样式定义方式的，就得先看完下面的优先级测试了。

三、判断用id、class以及标签选择器定义样式的优先级
本次测试中，为了减少其他因素的影响，只采用内部样式表来定义样式，同时分别使用了ID选择器和Class选择器来选择使用样式的标签。

1>三种方式并存的时候

xiaoxuetu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<style type="text/css" media="screen"> 
fieldset { 
width: 50% 
} 
p { 
color: red; 
} 
#idtest { 
color: green; 
} 
.classtest { 
color: blue; 
} 
</style> 
</head> 
<body> 
<fieldset> 
<legend>单一显示效果</legend> 
<p id="idtest">只使用ID(绿色)</p> 
<p class="classtest">只使用Class(蓝色)</p> 
</fieldset> 
<p>&nbsp;</p> 
<fieldset> 
<legend>先引入ID定义的样式再引入Class定义的样式</legend> 
<p id="idtest" class="classtest">小学徒</p> 
</fieldset> 
<p>&nbsp;</p> 
<fieldset> 
<legend>先引入Class定义的样式再引入ID定义的样式</legend> 
<p id="idtest" class="classtest">小学徒</p> 
</fieldset> 
</body> 
</html>

显示效果：通过优先级对比验证CSS控制样式的三种方式 - 文章图片得出优先级结果 id选择器 > class选择器 > 标签选择器

2>当只有两个class或者两个id的时候

xiaoxuetu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<style type="text/css" media="screen"> 
#idtest { 
color: green; 
} 
#idtest2 { 
color: YellowGreen; 
} 
.classtest { 
color: blue; 
} 
.classtest2 { 
color: yellow; 
} 
</style> 
</head> 
<body> 
<fieldset> 
<legend>两个class的时候</legend> 
<p class="classtest2" class="classtest">classtest2(黄色)先classtest(蓝色)后</p> 
<p class="classtest" class="classtest2">classtest(蓝色)先classtest2(黄色)后</p> 
</fieldset> 
<p>&nbsp;</p> 
<fieldset> 
<legend>两个id的时候</legend> 
<p id="idtest" id="idtest2">idtest(绿色)先idtest2(黄绿色)后</p> 
<p id="idtest2" id="idtest">idtest2(黄绿色)先idtes(绿色)t后</p> 
</fieldset> 
</body> 
</html>

显示效果：

通过优先级对比验证CSS控制样式的三种方式 - 文章图片

得出优先级结果：当且仅当有两个或者是多个class或者id的时候，谁在前面就谁的优先级高。

3>只有标签p选择器的时候

xiaoxuetu.html(蓝色样式先，红色样式后)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<style type="text/css" media="screen"> 
p { 
color: blue; 
} 
p { 
color: red; 
} 
</style> 
</head> 
<body> 
<p>蓝色样式先，红色样式后</p> 
</body> 
</html>

显示效果：

通过优先级对比验证CSS控制样式的三种方式 - 文章图片

xiaoxuetu2.html(红色样式先，蓝色样式后)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>CSS样式表优先级测试</title> 
<meta charset="UTF-8" /> 
<style type="text/css" media="screen"> 
p { 
color: red; 
} 
p { 
color: blue; 
} 
</style> 
</head> 
<body> 
<p>红色样式先，蓝色样式后</p> 
</body> 
</html>

显示效果:
通过优先级对比验证CSS控制样式的三种方式 - 文章图片
从两个结果我们可以知道，当只有标签选择器的时候，后面定义的样式表的优先级就越高。
四、总结
1.当只使用id选择器、class选择器或者标签选择器的时候，不管是使用多少种样式表定义方式，都是内嵌样式的优先级最高，接下来外部样式表和内部样式表的就得看他们的引入顺序了;
2.当只使用id选择器或者class选择器的时候，同一个标签内不管使用了多少个，都是排在前面的优先级更高;
3.当只使用标签选择器的时候，如果定义了多个一样的，你们写在最后面的标签选择器生效，也就是它的优先级最高;
4.当同一个标签中既有id选择器，又有class选择器，同时又有标签选择器的时候，优先级的次序是id选择器 > class选择器 > 标签选择器;
5.当每一种都有的时候，那就根据具体情况具体分析吧，嘿嘿，哈哈……

恩，这篇文章我很用心写的哦，如果大家觉得好，麻烦点击一下赞吧，又或者你有什么疑问或者不一样的意见，欢迎留言讨论哦，因为白天要上班，所以我会在晚上有空的时候及时处理的，还请见谅哈。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

内容总结

以上是互联网集市为您收集整理的通过优先级对比验证CSS控制样式的三种方式全部内容，希望文章能够帮你解决通过优先级对比验证CSS控制样式的三种方式所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/411883.html

来源：【匿名】

【上一篇】CSS使用盒模型实例【下一篇】php无法调用css怎么办

更多 ►

【通过优先级对比验证CSS控制样式的三种方式】教程文章相关的互联网学习教程文章

CSS选择符优先级引起的样式失效【代码】

选择符优先级带来的样式失效:由于CSS选择符优先级可能引起某些样式失效，这个问题初学者可能会碰上，但是往往并不容易发现。代码实例:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> .mydiv{color:green;} </style> </head> <body> <div class="mydiv"> <ul> <li>蚂蚁部落</li> <li>div+css专区</li...

css中后代、元素、类、id选择器以及行间style优先级的比较【图】

比较选择器优先级检验方法如下将所有选择器应用到一个超链接上，观察结果，得出结论。输出结果为，说明行间style的优先级是其中最高的。去掉行间style代码：输出结果：后代选择器生效，注释其代码，继续比较：得出输出结果，注释代码。得出输出结果。从上面结果不难看出行间style > 后代 > id > class > 元素那么为什么会是这样的结果呢，判断优先级，以权重为指标，权重越大优先级越高：一般约定 id选择器的权重为100，类选择器...

CSS——优先级【代码】

样式优先级：默认样式<标签选择器<类选择器<id选择器<行内样式<!important <!DOCTYPE html> <html> <head><meta charset="utf-8" /><title></title><style>#main {font-size: 80px;color: blue;}.box {font-size: 40px !important;color: yellow;}div{font-size:20px;color:red;} </style> </head> <body><div class="box" id="main" style="font-size:120px;color:gray">哈哈</div> </body> </html>注释：上述代码为了屏蔽样...

css知多少（6）——选择器的优先级【图】

1. 引言　　上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说明。　　上图中，css中的两个选择器都是针对<span>的，而且两个设置的颜色不一样，这里的<span>到底听从谁的命令？　　上面还是比较简单的，下面在来一个复杂的：　　上图中的<li>该显示成什么颜色呢？2. 特指度　　要解决以上问题，我们需要引入一个概念——特指度（specificity）。特指度表示一个css选择器...

动画中的id与class使用css3的优先级问题【代码】【图】

今天在做一个项目，用zepto给元素增加一个class，class里面有transform的效果。开始的时候，元素的样式是用id选择器写的，但是增加class之后，发现动画效果出不来，当时头好晕没想出来为啥，结果回家后用简单的代码打一遍，发现原来是个很简单的问题……动画出不来的原因就是：id选择器里的css优先级要大于class选择器的优先级。新加进来的class没有办法覆盖掉原有的样式，导致了动画出不来。简单代码测试：<!DOCTYPE html><html><...

css标签选择器的优先级

1.行内样式>嵌入式>外部样式(就近原者)当外部样式在嵌入式的前面时就是外部样式为主2.重复样式p{color:red}p{color:green}<p>是green</p>3.id选择器和class选择器相同点都可一定义属性值不同点id选择器是唯一的只能定一个class可以定义多个相同类名例1<p class="a">我是类样是红色<span class="a">红色也有继承a也可以是相当于类属性</span></p><p id="a">错误<i id="a">不能在次定义</i></p>4.子选择器ul>li ul下的所有子元素u...

CSS怎样改变行内样式（通过外部级联样式表） css !important用法CSS样式使用优先级判断【图】

CSS样式优先级行内>内部>外部使用!important的css定义是拥有最高的优先级的。只是在ie6下出了一点小的bug，注意书写方式一般可以轻松避开的。CSS中的!important一般都是用于对低版本的除了iE 6 ，用来做hack的，后面缀上了!important的css语句，让浏览器首选执行这个语句，因为css有继承的样式，加上!importanrt可以覆盖父级的样式。 IE6不认识它的，IE7和别的浏览器中可以用，用来处理浏览器的兼容性 .padding-l-r p span{ fon...

CSS选择器优先级总结

CSS三大特性—— 继承、优先级和层叠继承：即子类元素继承父类的样式;优先级：是指不同类别样式的权重比较;层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。css选择符分类　　1.标签选择器(如：body,div,p,ul,li)　　2.类选择器(如：class="head",class="head_logo")　　3.ID选择器(如：id="name",id="name_txt")　　4.全局选择器(如：*号)　　5.组合选择器(如：.head .head_logo)　　6.后代选择器 (如：#head .nav ul li...

2、css的存在形式及优先级【代码】

一、优先级简单可以理解为就近原则；<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.c1{background-color: red;color: white;}.c2{font-size: 26px;color: black;}</style></head><body><div class="c1 c2" style="color: blue">abc</div></body></html>二、存在形式css样式可以存在于一个文件中；在HTML中引入即可；##HTML文件 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Ti...

***CSS魔法堂：选择器及其优先级【代码】【图】

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　首先看看一道阿里这期网申的题目吧！1.找出下面优先级相同的选择器　　A. img.thumb:after　　B.[data-job="frontend"]::first-letter　　C. #main::before　　 D. [type="checkbox"]:checked　　E. ul#shop-list 二、回顾选择器类型　　　　　　　　　　　　　　　　　　　　　 html片段<body><div id="content"><div>Hello world</div><div cla...

css优先级及其对应的权重

1.选择器的优先级　　！important>内联选择器（style）>id选择器>类选择器 | 属性选择器 | 伪类选择器 > 元素选择器>通配符(*)2.选择器的权重（通过权重计算可以避免许多问题）!important10000内联选择器1000id选择器100类选择器10元素选择器1　　eg:body #sum{width:100px;} 结果：100+1=101。　　ps:！important在某些时候会失效（当然能不用!imortant就不要用）　　　　eg:box{　　　　　　　　width:100px!important;　　　　...

day4(css优先级)【代码】

参考博客：　　http://www.cnblogs.com/yuanchenqi/articles/6856399.html css属性选择器<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>/*.c1[po*="p"]{*//*color: red;*//*}*//*[po="p1 p"]{*//*color: green;*//*}*//*.c1{*//*color: red;*//*}*//*.btn{*//*font-size: 30px;*//*}*/</style></head><body><div po="p1 p" class="c1 btn">p1</div><!--这个class有两个值，即等于c1又等于btn...

首页 / CSS / 通过优先级对比验证CSS控制样式的三种方式

通过优先级对比验证CSS控制样式的三种方式

内容导读

内容图文

内容总结

内容备注

内容手机端

【通过优先级对比验证CSS控制样式的三种方式】教程文章相关的互联网学习教程文章

CSS选择符优先级引起的样式失效【代码】

css中后代、元素、类、id选择器以及行间style优先级的比较【图】

CSS——优先级【代码】

css知多少（6）——选择器的优先级【图】

动画中的id与class使用css3的优先级问题【代码】【图】

css标签选择器的优先级

CSS怎样改变行内样式（通过外部级联样式表） css !important用法CSS样式使用优先级判断【图】

CSS选择器优先级总结

2、css的存在形式及优先级【代码】

***CSS魔法堂：选择器及其优先级【代码】【图】

css优先级及其对应的权重

day4(css优先级)【代码】

CSS优先级规则的细节

CSS样式的优先级

CSS 选择器及优先级【图】

CSS - 相关标签

验证 - 相关标签

CSS - 技术教程分类

CSS - 最新教程

CSS - 最热教程