编程教育资源分享平台

网站首页 > 后端开发 正文

css也能继承还有优先级

luoriw 2024-02-01 14:26:50 后端开发 12 ℃ 0 评论

刚加的css怎么没有渲染出来?浏览器中查看,发现是被其他的css给覆盖了,相信我们都曾遇到过这样的问题。那么浏览器是如何选择css标签的渲染顺序的呢?换句话说,css选择器的优先级是怎么规定的?

一般,内联样式优先级>id选择器>class选择器>html选择器

内联样式优先级:1000

id选择器:100

class选择器:10

html选择器:1

注意:在同组选择器中,如果在样式中加了!important,则优先显示

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

div{

color:aqua;

}

.div1{

color:red;

text-align: center;

font-family: "微软雅黑";

font-size: 20px;

font-style: italic;

}

#box{

color:green;

}

.box{

color:red !important;

font-size: 25px;

font-family:"楷体";

font-weight: bold;

}

</style>

</head>

<body>

<div class="div1">

这是爷爷

<div class="div2">

这里是爸爸

<div class="div3">

这里是孙子

</div>

</div>

</div>

<div id="box" class="box" style="color: yellow;">

这是个盒子

</div>

</body>

</html>

总结:

  1. !important 表示强制应用该样式,例如:button{ width: 150px !important;},与以上的选择器相遇时,强制使用此样式;
  2. 如果比较后权重相同,那么后者覆盖前者,后渲染的胜出;
  3. 内联样式 > id选择器样式 > 类选择器样式 > 元素选择器样式;
  4. CSS选择器的使用,应该尽量避免使用 !important 和 内联样式;id通常也是与class区分开使用,前者多用于JS中的结点定位,后者多用于CSS选择器。
  5. 重中之重,1000/100/10/1这种权值系数的比较方式只是便于理解,真实情况下10个class并不能逆转1个id。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言