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

  • CSS3 transform:rotate()制作旋转图片

    在《CSS3 transition transform属性及实例详解》中我们实现了:鼠标放到图片上,图片等比例放大的效果,今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能,可以在CSS里面设定旋转的角度,也可以设定旋转用多少时间来完成。 旋转图片HTML代码 <img src=…

    2019年1月29日
    5.3K1
  • 使用html、css、bootstrap设计一个电子商务网站的导航条(免费)

    本课程适合前端开发初级学习者,学习使用html、css和bootstrap技术,实现导航条设计。 预计用时:30分钟 1、实现导航条2、实现品牌字体3、实现搜索表单4、实现快捷菜单的显示

    2018年12月20日
    2.3K0
  • 一句代码给图片加倒影-CSS3

    本文使用纯CSS代码给图片加倒影,CSS代码 : img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } 效果如下图所示: 完整代码: 一句代…

    2019年8月18日
    2.1K0
  • css布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    2.6K0
  • CSS3 transition transform属性及实例详解-鼠标放到图片上图片等比例放大

    CSS3的transform:scale()可以实现按比例放大或者缩小功能,transform呈现的是一种变形结果。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡,transition呈现的是一种过渡,是一种动画转换过程,如渐显、渐弱、动画快慢等。 transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间; t…

    2018年8月1日
    3.9K0
  • “注册”按钮(图片)怎么跳转到注册页面?

    页面代码: <input name=”Submit” type=”submit” class=”STYLE2″ value=”登陆”> <input name=”Submit2″ type=”submit” class=”STYLE2″ value=”注册”> “注册”按钮怎么跳转到注册页面? <inpu…

    2021年4月5日
    1.9K0

发表回复

登录后才能评论