CSS flex 属性相对于 flex-basis 的特殊性

Question

有人能告诉我 CSS 个属性之间是否有特异性吗？

我正在测试 flexbox，我试过这个场景：

第二个选择器.flex-basis-5是通过JS在某种条件下应用的。我原以为 flex-basis 的值会被新的选择器覆盖，但只有在我向其添加 !important 时才会应用它。

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-item-7 {
  flex: 0 0 58.33%
}

.flex-basis-5 {
  flex-basis: 41.66%;
}

<div class="flex-container">    
   <div class="flex-item-7 flex-basis-5">Some content</div>
</div>

谢谢！

Answer 1

特异性基于选择器，而不是属性。应用于选择器的属性按写入顺序应用，因此集合中较低的属性将覆盖较高的值。

这就是说，如果我理解正确，你的代码就可以工作。这是一个演示：

const btn = document.getElementById("toggle")
btn.addEventListener("click", () => {
  document.querySelector(".flex-item-7").classList.toggle("flex-basis-5")
})

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-item-7 {
  flex: 0 0 58.33%;
  background: #ccc;
}

.flex-basis-5 {
  flex-basis: 41.66%;
}

button {
  margin-top: 2em;
}

<div class="flex-container">    
   <div class="flex-item-7 flex-basis-5">Some content</div>
</div>

<button id="toggle">Toggle .flex-basis-5</button>

如果您在您的应用中看到一些不同的东西，很可能是您在 .flex-item-7 上方定义了 .flex-basis-5，因此它具有较低的优先级并被后来定义的样式覆盖。

CSS flex 属性相对于 flex-basis 的特殊性

CSS specificity of the flex property over flex-basis

html

css

css-specificity

flexbox

CSS flex 属性 相对于 flex-basis 的特殊性

CSS specificity of the flex property over flex-basis

html

css

css-specificity

flexbox

CSS flex 属性相对于 flex-basis 的特殊性