CSS规则如何覆盖

Question

可能被视为How does a CSS rule override another CSS rule的副本，但在我的标记中

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

和样式表

.parent div { deceleration }

造成什么

div .child { deceleration }

倍率

var labels = document.querySelectorAll('.navLabel');

因为后者更具体，我认为 提前谢谢

Answer 1

根据Cascading order CSS有一个决策算法，用于在所有与元素匹配的选择器之间发生冲突时找到应用的声明：

列表中的上方项目具有优先级，位于较低项目之前

1. 声明标记为'！important'

2. 作者样式表中的声明（由网站提供）

     

   特异性=连接＆amp; b＆amp; c，具有以下顺序和重量：
     a = 100 *（选择器中的ID属性数）
     b = 10 *（选择器中的类属性（或伪类）的数量）
     c = 1 *（选择器中标签名称（或伪元素）的数量）

   • 更高的特异性（第一）

     • 主样式表中的规则
       如果具有相同的特异性：
       样式表/文件中的
       • 唐纳存在
       样式表/文档中的
       • 上层存在
     • 导入的样式表中的规则
       如果具有相同的特异性：
       样式表/文件中的
       • 唐纳存在
       样式表/文档中的
       • 上层存在

   • 较低的特异性（下一个）

     • 主样式表中的规则
       如果具有相同的特异性：
       样式表/文件中的
       • 唐纳存在
       样式表/文档中的
       • 上层存在
     • 导入的样式表中的规则
       如果具有相同的特异性：
       样式表/文件中的
       • 唐纳存在
       样式表/文档中的
       • 上层存在

3. user style sheet中的声明 [如第2部分]

4. 用户代理样式表中的声明（由浏览器提供）
   [如第2部分]

注1

使用元素的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属性具有风格，如

• ALIGN
• WIDTH / HEIGHT
• HIDDEN

这些属性被转换为与相应的CSS规则的特异性等于1，并且假定在在作者的样式表的开始

要被放

所以：

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

等于：

<div>My content</div>

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

所以回答你的问题

那是因为

的存在

.parent div { deceleration }

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

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

然后

div .child { deceleration }

会适用。