css - CSS规则如何覆盖

Question

可能被视为 How does a CSS rule override another CSS rule 的重复项但在我的标记中

<div class="parent">
  <div class="child">
    this is content ...
  </div>
</div>

和样式表

div .child { deceleration }
.parent div { deceleration }

是什么原因造成的

.parent div { deceleration }

覆盖

div .child { deceleration }

我认为后者更具体。
提前致谢

Answer 1

根据Cascading order CSS 有一个决策算法，可以在所有匹配元素的选择器之间发生冲突的情况下找到应用的声明:

列表中的上层元素具有优先级并优先于下层元素

1. 标记为'!important'的声明

2. 作者样式表中的声明(网站提供)

   specificity = Concatenating a & b & c with the following order and weights:
   a = 100 * ( number of ID attributes in the selector )
   b = 10 * ( number of Class attributes (or Pseudo-classes) in the selector )
   c = 1 * ( number of tag names (or Pseudo-elements) in the selector )

   • 更高的特异性(第一)

     • 主样式表
       中的规则在相同特异性的情况下:
       • 在样式表/文档中出现
       • 上位在样式表/文档中
     • 导入的样式表
       中的规则在相同特异性的情况下:
       • 在样式表/文档中出现
       • 上位在样式表/文档中

   • 特异性较低(下一个)

     • 主样式表
       中的规则在相同特异性的情况下:
       • 在样式表/文档中出现
       • 上位在样式表/文档中
     • 导入的样式表
       中的规则在相同特异性的情况下:
       • 在样式表/文档中出现
       • 上位在样式表/文档中

3. 声明 user style sheet
   [喜欢第 2 部分]

4. User-Agent 样式表中的声明(由浏览器提供)
   [喜欢第 2 部分]

---

注一

使用元素的 style 属性将等同于在样式表末尾指定的基于 ID 的选择器。

所以:

<div id="myDiv" style="color:red">My content</div>

等于:

<div id="myDiv">My content</div>

#myDiv{    /* last line of stylesheet */
    color:red
}

注2

一些 HTML 属性是风格化的

• 对齐
• 宽度/高度
• 隐藏

这些属性被翻译成相应的 CSS 规则，specificity 等于 1，并假定放在作者样式表的开头

所以:

<div id="myDiv" align="center">My content</div>

等于:

<div>My content</div>

div{    /* first line of stylesheet */
    text-align:center
}

所以回答你的问题

那是因为 downer 的存在

.parent div { deceleration }

如果你像这样把它放在上面

.parent div { deceleration }
div .child { deceleration }

然后

div .child { deceleration }

将适用。