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

  • 如何为需要打印的网页设置单独的css样式

    项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用: <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…

    2019年11月20日
    14.6K0
  • jquery实现全选、反选、取消全选功能代码

    管理系统后台,商品管理、信息管理等,需要删除,为方便操作应该提供全选、反选、取消全选功能。 今天中文网页设计分享jquery实现全选、反选、取消全选功能代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; chars…

    2018年10月17日
    11.2K0
  • 会移动的文字 marquee标签(入门到高级)

    会移动的文字(Marquee) 基本语法 <marquee> … </marquee> <marquee> 啦啦啦,我会移动耶! </marquee> 文字移动属性的设置 方向 <direction=#> #=left, right <marquee direction=left&…

    2018年7月30日
    7.7K0
  • HTML5网页中如何嵌入音频,视频?

    《HTML5的视频播放控制技术》 介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。 本文主要介绍在HTML5 中如何嵌入音频,视频? 在HTML5 中如何嵌入音频? HTML5 支持 MP3、Wav 和 Ogg 格式的音频,代码示例: <audio controls>…

    2019年11月23日
    5.5K0
  • CSS制作简洁的栏目/标题样式

    CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…

    2019年1月5日
    9.1K0
  • vue学习-我的第一个vue代码

    创建一个 .html 文件,然后通过如下方式引入 Vue: <!– 开发环境版本,包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者: <!– 生产环境版本,优化了尺寸和速度 –>…

    2020年6月14日
    18.0K0

发表回复

登录后才能评论