应用 CSS 样式的优先级是什么？提供的示例让我感到困惑答案

【问题标题】：What priority are CSS styles applied? Example provided that is confusing me应用 CSS 样式的优先级是什么？提供的示例让我感到困惑
【发布时间】：2016-11-11 18:25:38
【问题描述】：

我知道这应该是一个非常简单的话题，但我很困惑，我花了比我应该的时间更长的时间来试图理解我的教授给我们的这个例子。

据我了解，规则假定是您首先使用内联 css，然后是文档 css，然后是外部 css，然后是优先级。优先级来自我认为的 100*IDs+10*Class+1*Element 参考。

下面是真正让我困惑的代码：

<div id="id1">
  <ul>
    <li class="c1" id="id2">Item 1</li>	
    <li class="c2 c3">Item 2</li>
    <li class="c3">Sublist:			
      <ul>
        <li class="c1">Subitem 1</li>
        <li class="c2">Subitem 2</li>
        <li class="c2" id=”id3”>Subitem 3</li>
      </ul></li>
    <li>Item 4</li>
  </ul>
  <div id="id4">
    <ul>
      <li id="id5">One thing</li>
      <li id="id6" class="c2">And another thing</li>
      <li id="id7" class="c1">A third thing.</li>
    </ul>
  </div>
</div>

<style>
div > li 
{
  color: yellow;
}
.c2
{
  color: red;
}
ul li+li+li
{
  color: green;
}
#id1, #id4 
{
     color: orange;
}
#id7 
{
  color: blue;
}
</style>

在上面的代码中，item 2 是红色的，sublist(+subitem1) 是绿色的，等等。这怎么可能？为什么不是所有的东西都是橙色的？ #id1 样式是否应该自动应用于所有内容，因为它是唯一具有 ID 说明符的样式（并且所有内容都是 id="id1" 的 div 的子项？

【问题讨论】：

'ID1' 是 Parent Div 的 id。并且您已经为子元素添加了 CSS。通常子元素样式会覆盖父元素样式。
"As per CSS rules, directly targeted element will always take precedence over rules which an element inherits from its ancestor."

标签： html css css-selectors

【解决方案1】：

如果您对同一元素有两条规则，则您编写的优先级公式是可以的。

在 css 中，子元素从父母那里继承颜色，就像在您的示例中一样。

如果将新规则（尽管具有较低的特异性编号）应用于子级，则会覆盖继承。

无论如何，请阅读：https://css-tricks.com/specifics-on-css-specificity/

【讨论】：

【解决方案2】：

一个元素的样式会覆盖它的继承。在没有定义样式的情况下，我们会更喜欢继承的值而不是默认值。

【讨论】：

【解决方案3】：

有误会。

首先它对所有标签都做了橙色。但后来由于某些标签根据 css 定义不同，然后它会更改为您在 css 中提到的指定颜色。

对于 CSS 类型： http://webdesign.about.com/od/css/qt/aatypesofcss.htm

已编辑。

【讨论】：