一个CSS外部样式表可以同时包含类样式，ID样式，和标签样式吗？

html-css022

一个CSS外部样式表可以同时包含类样式，ID样式，和标签样式吗？,第1张

亲测，如果是改变同一属性的话，id>类>标签，例如background-color

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

div {

width: 100px

height: 100px

background-color: red

}

#ee {

background-color: green

}

.qq {

background-color: yellow

}

</style>

</head>

<body>

<div class="qq" id="ee"></div>

<!-- <script>

var aa = document.querySelector('div')

aa.classList.add('ee')

</script>-->

</body>

</html>

背景颜色是以id设置的为准的

按一般伦：

ID >Class >标签

如以下样式：

HTML为：

<div id="id1" class="c1">选择器优先权</div>

#id1{color:#f00}

.c1{color:#0f0}

div{color:#00f}

这里，最后输出 的结果为 #f00

如果把选择器改为：

#id1{color:#f00}

#id1 .c1{color:#0f0}

div{color:#00f}

最后，这里输出的颜色为：#0f0

但如果HTML改为：

<div id="id1" class="c1"><b>选择器优先权</b></div>

CSS为：

#id1{color:#f00}

.c1{color:#0f0}

b{color:#00f}

这里最后输出结果即为：

#00f

因为 #id1与 .c1 并没有直接作用于对象上，故最后的结果为 b 的 00f