Question

我刚刚开始学习基础HTML＆amp; amp; CSS。我今天在CSS选择器方面一直在研究优先级。现在，我们正在进行以下练习，我想知道是否有人可以帮助我理解为什么1,2和3在文本颜色方面是红色，红色和绿色。据我所知，一个ID优先于一个类，而这个类的优先级高于常规元素。所以2应该是绿色的，因为我们将.central设置为绿色？

由于

＆＃13;

body {
  color: blue;
  background-color: yellow;
}
p {
  color: red;
}
.central, .item {
  color: green;
}
#item {
  background-color: cyan;
}

＆＃13;

<p>1</p>
<div class="central">
  <p>2</p>
  <ul>
    <li id="item">3</li>
  </ul>
</div>

＆＃13;

Answer 1

在CSS模型中，每个元素都具有CSS规范中定义的所有属性，例如color属性。在您的示例中，元素<p>2</p>仅匹配一个CSS规则，即为color元素将red属性设置为p的规则。因此，关于“2”的颜色，有优先权问题需要解决。

在外部元素上设置的任何值都不会影响此处的color属性。

Answer 2

首先你纠正你的标记。

样式优先级从上到下给出。有id或类选择器的规则。

CSS样式规则的优先顺序是：

1用户定义的样式

2嵌入式或内联样式表

3内部样式表

4外部样式表

5浏览器默认样式

Answer 3

第二个是，应该是红色，它可以正常工作。

.central中的所有内容都是绿色的，但段落是红色的。我创造了一个小提琴。

<div class="central">
    green outside the &lt;p>
    <p>red paragraph</p>
</div>    

<style>
    p {color: red;} 
    .central {color: green;}
</style>

http://jsfiddle.net/st393nmz/

当然，如果您为.central中的段落添加规则，则会应用此规则。

<style>
    .central p {color: blue} /* paragraph above will be blue, not red */
</style>

Answer 4

仅为div标签内容设置绿色。所以它不会影响你的段落标签内容，因为你提到段落的颜色为红色。并且还注意到你的背景颜色为黄色不影响，因为你的样式标签的开头检查下面的标记：

<!DOCTYPE html>
<html>
<head>
</head>
<body> 
    <p>1</p>
    <div class="central"><p class="central">2</p>
    <ul>
    <li id="item" >3</li>
    </ul>
    </div>
    </body>
 <style>
    body {
    color: blue;
    background-color:yellow;
    }
    p {
    color: red;
    } 
     .central,.item{
    color: green;
    }
    #item {
    background-color: cyan;
    }
    </style>

CSS样式优先级

4 个答案: