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%的人还看了以下文章

  • FLV视频播放代码及Flvplayer.swf播放器下载

    FLV是被众多新一代视频分享网站所采用,是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称,它形成的文件极小、加载速度极快,有效地解决了视频文件在网络上很好的使用等问题。 下面分享在网页制作时,插入FLV格式视频的代码(兼容主流浏览器): <object class id=”clsid:D27CDB6E-AE6D-11cf…

    2018年5月14日
    11.4K0
  • CSS制作三角形原理—超简单

    CSS制作三角形原理—超简单CSS制作三角形原理—超简单CSS制作三角形原理—超简单CSS制作三角形原理—超简单

    网页制作中我们经常会需要三角形图标,例如内容展开收起、左右箭头点击切换轮播,点击某条列表数据查看详情等。 三角形图标应用范围广,我们有必要了解一下它的实现原理。 1) 一个最基础的边框效果 .content { width: 50px; height: 50px; border: 2px solid; border-color:#ff9600 #3366ff…

    2019年11月26日 网页制作
    8.8K0
  • 第8课:如何做各种超链接?

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

    2018年1月20日
    9.6K0
  • Html5一句代码制作语音搜索框

    Html5一句代码制作语音搜索框Html5一句代码制作语音搜索框Html5一句代码制作语音搜索框Html5一句代码制作语音搜索框

    HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框

    2022年3月19日 网页制作
    7.8K0
  • 纯CSS制作红色网站二级下拉导航菜单

    纯CSS制作红色网站二级下拉导航菜单,代码非常简洁,适合修改后使用,入门就能掌握。 二级下拉导航菜单HTML代码: <nav> <ul> <li><a href=”#”>首页</a></li> <li><a href=”#”>电影</a> <ul…

    2019年4月17日
    16.8K0
  • CSS进阶,4个案例入门,学会LESS使用

    Less 简介 什么是LESSCSS LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。 Less语言特性 LESS的变量 变量允许我们单独定义一系列通用的样式…

    2019年7月17日
    4.7K0

发表回复

登录后才能评论