css中id和class的优先级问题,与顺序无关

id,class,style的优先级别顺序为style高于id高于class。

div背景显示什么色?

<style type="text/css">
   .colorclass{background:red;width:300px;height:200px;}
   #colorid{background:black;width:100px;height:100px;}
</style>
<div id="colorid" class="colorclass">

答案:黑色

为什么是黑色,而不是红色,不是就近原则?,后出现的colorclass覆盖前面的colorid样式吗?

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

style,class与id之间的优先级问题,在页面初次完工未经改变,或者页面复杂程度很小的时候,搞不清楚这三者之间的优先级问题,似乎并没有什么大的问题,但是一旦随着页面的更改完善,以及页面元素的错综复杂度增加,问题就显而易见了。

举个栗子:

*{ color:red;}
body{ color:green;}
#id{ color:blue;}
.class{ color:yellow;}

显示效果:

css中id和class的优先级问题,与顺序无关

从①和②可以看出样式的定义顺序起了作用,我们把body{color:green}去掉的话,二者将同时显示红色,之所以①显示绿色,是因为body{}在*后面对body所包含的的标签内部进行了重新定义。
第③④⑤条规则的显示结果可以看出,在三中样式规则同时存在的时候优先级最高的是style所定义个属性值,与style,id,class的书写顺序没有关系。
第⑥和第⑦我想大家都明白是怎么一个结果了吧,就是说id与class的优先级为id优先于class,与顺序也没有关系。

总结:id,class,style的优先级别顺序为style高于id高于class。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/8809.html

(0)
江山如画的头像江山如画管理团队
78岁拜登一生曝光,超出你的相像!人生没有白做的梦,每一次梦都算数。
上一篇 2020年11月11日 上午8:16
java中类、接口、方法、变量命名时的大小写问题
下一篇 2020年11月15日 下午8:31

99%的人还看了以下文章

  • javascript-快速掌握DOM技术

    Javascript的组成: 1.  js的语法(核心)。 2. DOM(文本对象模型) :用于操作HTML文档的应用编程接口。 DOM的出现使得动态HTML(DHTML)得以实现,可以不用重新加载页面而改变网页的外观和内容。 DOM的级别(版本):DOM1,DOM2,DOM3 3. BOM(浏览器模型)  BOM是Browser Object Model的…

    2018年7月17日
    5.2K0
  • 第4课:字体

    这一课,你将学习字体以及如何用CSS来设置字体。我们还会考虑如何解决“网站所选的字体仅当访问者的PC上安装有该字体时才会被显示”这一难题。本课将对下列CSS属性进行讲解: font-family font-style font-variant font-weight font-size font 字体族[font-family] CSS属性font-fami…

    2020年2月22日
    8.8K0
  • 第5课:文本

    文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解: text-indent text-align text-decoration letter-spacing text-transform 文本缩进[text-indent] CSS属性text-indent用于为段落设置…

    2020年2月22日
    10.8K0
  • Less编写及使用快速入门

    前面我们学习了《4个案例入门,学会LESS使用》,今天一起来学习如何编写,编译并使用LESS LESS的编写 LESS的使用是很容易的,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。 LESS的编译 GUI编译工具 为方便起见,建议初学者使用GUI编译工具来编译.less文…

    2019年7月17日
    9.4K0
  • 第8课:如何做各种超链接?

    在这一课,你将学习如何在网页之间做超链接。 如何做超链接? 做链接只需一个元素<a>和一个属性href就行了。下面是一个例子,它是一个指向www.125jz.com的链接: 例1: <a href=”http://www.125jz.com/”>指向www.125jz.com的链接</a> 该例在浏览器中将显示如下: 指向…

    2018年1月20日
    9.8K0
  • jQuery屏蔽页面右键,禁止复制,文本选择代码

    屏蔽页面右键,禁止复制,文本选择功能,用jQuery实现非常简单。 125建站网分享两种方法。 方法一: //禁用右键、文本选择、复制 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“selectstart”,function(){return fals…

    2019年10月16日
    4.5K0

发表回复

登录后才能评论