标签、Id、Class权值谁先生效实验

_Rick_

于 2016-05-07 12:58:51 发布

阅读量605

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/u013542440/article/details/51337333

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文通过一个简单的HTML页面实例展示了CSS中ID选择器、类选择器及标签选择器的优先级顺序。通过不同样式的叠加应用，验证了Id>class>标签这一CSS选择器优先级原则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 通过实验证明Id>class>标签
1. 2.

<!DOCTYPE html>
<html>
<head>
<link href="index.css" type="text/css" rel= "stylesheet"/>
<script src="index.js" language="javascript"></script>
</head>
<body>
<div class="divclass" id="divid" style="width:100px;height:100px;">
</div>
</body>
</html>`

div{
    background:red;
}
#divid{
    background:blue;
}
.divclass{
    background:black;
}

这里写图片描述

div{
    background:red;
}
.divclass{
    background:black;
}

这里写图片描述

div{
    background:red;
}

这里写图片描述