英文:
Inheritance (specificity) problem regarding the width of a div element
问题
在".blue-box"选择器中，即使它是".float-container div"选择器的子元素，也无法覆盖指定的100px宽度，这是因为CSS的特异性规则导致了这个现象。特异性规则是用来决定哪个CSS规则应该应用到元素上的一种机制。在这种情况下，".float-container div"选择器和".blue-box"选择器都具有相同的特异性，因此样式冲突会导致最具体的规则生效。
如果您希望".blue-box"选择器中的样式覆盖".float-container div"选择器中的样式，您可以增加".blue-box"选择器的特异性，例如：
.float-container div {
border: 2px solid;
height: 75px;
width: 100px;
}
.red-box {
background: red;
}
.blue-box {
background: rgba(0, 0, 255, 0.493);
text-align: end;
width: 330px !important; /* 使用!important可以提高特异性 */
}
.orange-box {
background: orange;
}
.yellow-box {
background: yellow;
}
.green-box {
background: green;
}
.pink-box {
background: pink;
}
通过在".blue-box"选择器中使用"!important"，您可以确保它的样式优先于其他相同特异性的规则。但请注意，使用"!important"应谨慎，因为它可能导致样式维护困难和不可预测的结果。最好的做法是通过特异性和选择器的结构来管理样式的应用。
英文:
I've got a more theoretical problem. Im perplexed why the width of a div element does not change after I specifically specify it in the class selector ".blue-box".
In the ".float-container div" selector, I have specified the width of a box of 100px, but the ".blue-box" selector does not overwrite it, even though it is a child element of a ".float-container div" selector
<div class="float-container">
<div class="red-box">Box 1</div>
<div class="blue-box">Box 2</div>
<div class="orange-box">Box 3</div>
<div class="yellow-box">Box 4</div>
<div class="green-box">Box 5</div>
<div class="pink-box">Box 6</div>
</div>
.float-container div {
border: 2px solid;
height: 75px;
width: 100px;
}
.red-box {
background: red;
}
.blue-box {
background: rgba(0, 0, 255, 0.493);
text-align: end;
width: 330px;
}
.orange-box {
background: orange;
}
.yellow-box {
background: yellow;
}
.green-box {
background: green;
}
.pink-box {
background: pink;
}
I know how to bypass it. Im just interested in the theory behind it.I am confused why the blue-box inherits the 100px width and does not apply its own 330px width. I know that class is more specific than the div element, so where is the problem?
答案1
得分: 1
不继承宽度。蓝色方框是.float-container div选择器的一个子级，具有特异性（0, 1, 1），超过了.blue-box的特异性，后者是（0, 1, 0）。
英文:
It's not inheriting the width. The blue box is a subject of the .float-container div selector, which has specificity (0, 1, 1) which beats the specificity of .blue-box which is (0, 1, 0).
答案2
得分: 0
The styling from {.float-container div} has more specificity than that of {.blue-box}.
Look at it this way. Let's assume class selectors have a specificity of 10 and element selectors have a specificity of 1. Then {.float-container div} would have a specificity of 10 + 1 = 11 because it contains both class and element selectors while {.blue-box} would have a specificity of just 10.
You can reference this article if you need more explanations.
https://medium.com/code-writers/understanding-compound-selectors-and-why-to-avoid-them-in-css-d969e60b71dc
英文:
The styling from {.float-container div} has more specificity than that of {.blue-box}.
Look at it this way. Let's assume class selectors have a specificity of 10 and element selectors have a specificity of 1.
Then {.float-container div} would have a specificity of 10 + 1 = 11 because it contains both class and element selectors while {.blue-box} would have a specificity of just 10.
You can reference this article if you need more explanations.
https://medium.com/code-writers/understanding-compound-selectors-and-why-to-avoid-them-in-css-d969e60b71dc
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论