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)
江山如画的头像江山如画管理团队
上一篇 2020年11月11日 上午8:16
下一篇 2020年11月15日 下午8:31

99%的人还看了以下文章

  • 第5课:到目前为止学到了些什么?

    上一课我们已经学习了这些: <html> <head><title></title></head> <body> </body> </html> 网页标题(title)写在head(头部)里:<title>网页标题写在这里</title>。…

    2018年1月20日
    6.3K0
  • javascript-快速掌握DOM技术

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

    2018年7月17日
    3.9K0
  • css布局基础:行内元素、块级元素练习

    主要知识点: 1、理解什么是行内元素?什么是块级元素? 2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展: 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图: 参考: <nav> <ul> <li><…

    2020年4月4日
    11.3K0
  • 第6课:超链接

    CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样,我们便可为网站增添奇特而有用的效果。

    2020年2月22日
    2.7K0
  • 会移动的文字 marquee标签(入门到高级)

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

    2018年7月30日
    6.5K0
  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    5.6K0

发表回复

登录后才能评论