下面的两条样式为什么不生效？直接用类名不能定义bd1和bd2嘛？为什么前面一定要加上.box呢？
来源：2-11 编程练习
余青龙
2020-10-13 22:10:21
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box {
width: 500px;
height: 500px;
background: red;
}
.box div {
width: 100px;
height: 100px;
background-color:yellow ;
}
.bd1 {
width: 200px;
height: 200px;
background-color:green ;
}
.bd2 {
width: 100px;
height: 100px;
background-color:green ;
}
</style>
</head>
<body>
<div class="box">
<div class="bd1"></div>
<div class="bd2"></div>
</div>
</body>
</html>
1回答
-
同学你好，关于你的问题，回答如下：
1、可以直接使用类名定义样式，但是这里没有生效是因为有使用.box div这个选择器设置的样式（如下图：.box div是设置.box下的div元素，在本段代码中也是.bd1与.bd2这两个元素哦），这个选择器中有父级的类，还有当前元素的div，即：一个类、一个元素，所以比下面直接使用一个类的选择器的权值要大，优先级比较高，使用的是.box div中的样式（相同的样式，使用优先级比较高）
2、由于代码的灵活性，添加父级元素的类名是一种解决方式（添加之后，权值比较大，所以可以使用下面的），但是不是唯一的，还有其他的方式哦。
比如：写上当前的元素标签，也是一个类、一个标签，权值一样，但是下面的距离html结构更近一些，根据就近原则（当权值一样时，谁距离近，谁优先级比较高，优先使用），使用的是下面的哦，例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题