继承(特异性)问题涉及 div 元素的宽度

huangapple go评论69阅读模式
英文:

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

huangapple
  • 本文由 发表于 2023年2月14日 02:58:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/75440156.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定