为什么我的 <p> 通用选择器会覆盖我的类选择器？ [复制]答案

【问题标题】：Why is my general selector for <p> overwriting my class selector? [duplicate]为什么我的 <p> 通用选择器会覆盖我的类选择器？ [复制]
【发布时间】：2021-12-08 01:28:11
【问题描述】：

我是一名信息学学徒，但我遇到了问题。

我目前正在努力找出，为什么我的字体颜色为红色的类选择器被我的一般 <p> 颜色覆盖？我还尝试在我写<p style="color: yellow"> 时找出它是否被覆盖，但这有效。

这就是我的 HTML 的样子：

p {
  color: green;
}

.Banane {
  color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HTML 5 Boilerplate</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <!--<script src="index.js"></script>-->
  <div class="Banane">
    <h1>Bananenbrot ist lecker</h1>
    <h2>Wieso auch nicht?</h2>
    <p>Wusstest du dass Bananenbrot aus vielen Vitananen besteht?</p>
  </div>
</body>

</html>

我什至用 !important 尝试过，但它仍然不起作用。它只是保持绿色。

谢谢你们！

【问题讨论】：

p 没有 Banane 类
CSS 顾名思义就是层叠。它将应用它遇到的第一个值。在这个例子中，p 元素是正确的选择，Banane 类应用于 p 元素的父元素而不是 p 元素本身。如果元素本身没有设置颜色值（例如 h1 和 h2 元素），那么它将向其父元素查找值。
欢迎来到 Stack Overflow。请看，What should I do when someone answers my question? 也可以通过tour 来熟悉如何使用这个平台。

标签： html css

【解决方案1】：

在你的情况下：

p {
  color: green;
}

虽然它不如.Banane 强大，但它只影响<p> 而不是<div>，即父级。

选择器对<p> 非常特殊，它只对<p> 影响<div> 内的颜色。

【讨论】：

【解决方案2】：

Css 按特定顺序解决冲突，因为 p 比包含类 Banane 更特定，除非您指定 Banane 中的 p 也应为红色，否则您会得到绿色文本。

p{
    color: green;
} 

.Banane p{
    color: red; 
}
.Banane{
    color: red; 
}

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>HTML 5 Boilerplate</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
      
        <!--<script src="index.js"></script>-->
            <div class="Banane">
                <h1>Bananenbrot ist lecker</h1>
                <h2>Wieso auch nicht?</h2>
                <p>Wusstest du dass Bananenbrot aus vielen Vitananen besteht?</p>
            </div>
      </body>
    </html>

【讨论】：

【解决方案3】：

默认情况下Banane 内部的元素从父级继承颜色，因此当您将color: red 添加到Banane 类时，h1 和h2 元素从其父级继承了红色。另一方面，对于p 选择器，您基本上说每个p 元素都应该有color: green，因此Banane 内部的p 将不再从父级继承颜色，因为它已被您选择。

您可以在 chrome 开发工具的computed 标签中看到这一点，绿色高于红色，它将被应用。

【讨论】：