Question

我知道这应该是一个非常简单的主题，但我很困惑，而且我花的时间比我应该理解我教授给我们的这个例子要长。

根据我的理解，规则假设是你首先进行内联css，然后是文档css，然后是外部css，然后是优先级。优先级来自我认为的100 * ID + 10 * Class + 1 * Element reference。

以下代码让我感到困惑：

<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>

在上面的代码中，第2项为红色，子列表（+ subitem1）为绿色等。这怎么可能？为什么一切都不是橙色的？＃id1样式不应该自动应用于所有内容，因为它是唯一一个带有ID说明符的（并且所有内容都是div的子ID =“id1”？

Answer 1

元素的样式会覆盖它的继承。如果未定义样式，我们将优先选择继承的值。

Answer 2

存在误解。

它在所有标签的第一个位置都是橙色。但是后来因为某些标签根据css定义不同，所以它会变为你在css中提到的指定颜色。

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

<强>编辑

Answer 3

如果您对同一元素有两个规则，那么您编写的优先级公式就可以了。

在css中，子元素从父类继承颜色，如示例中所示。

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

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

CSS样式的优先级是什么？例子提供了令我困惑的例子

3 个答案: