Question

我在PostCss + ReactJs应用程序的嵌套组件中无法设置段落标签的样式。首先，我以为我错过了PostCss中的某些内容，以及它如何与react组件一起工作，但后来尝试使用纯CSS和HTML重现该问题，并且具有相同的异常行为。

HTML

<div class="parentPar">
      <p>Parent Paragraph 1</p>
      <p class="hd">SubHeader paragraph</p>
      <p >Normal paragraph</p>
</div>

CSS

div.parentPar p{
    color: green;
    font-size: 30px;
    font-weight: 600;
}

.hd{
    color: red;
    font-size: 20px;
    font-weight: 500;
}

p{
    color: blue;
    font-size: 10px;
    font-weight: 400;
}

如果从最顶部的class="parentPar"浏览器中删除div，则SubHeader paragraph将显示为红色，所有其他显示为蓝色但是，在最顶部的class="parentPar"中使用div时，浏览器会将所有段落呈现为绿色。这是否意味着父容器会禁止子容器中的样式？

这里是Codepen玩https://codepen.io/javapantry/pen/LYGwbeP

Answer 1

app不是课程。这是id，因此您的CSS中的这一行：

div.app p{

可以更改为：

#app p{

然后将.hd{更改为#app p.hd，以便更具体。

最后，我在最后一个<p>元素中添加了一个类，以使其简单#app p.newClass 如下面的代码段所示：这都是关于特异性的。

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

div.parentPar p {
  color: green;
  font-size: 30px;
  font-weight: 600;
}

#app p {
  color: lime;
  font-size: 25px;
  font-weight: 550;
}

#app p.hd {
  color: red;
  font-size: 20px;
  font-weight: 500;
}

#app p.newClass {
  color: blue;
  font-size: 10px;
  font-weight: 400;
}

<div class="parentPar">
  <p>Parent Paragraph 1</p>
  <div id="app">
    <p class="hd">SubHeader paragraph</p>
    <p class="newClass">Normal paragraph</p>
  </div>
</div>

Answer 2

在CSS中，我指出了更改的地方

.parentPar > p{ /* this it */
    color: green;
    font-size: 30px;
    font-weight: 600;
}

/*div.app p{
    color: lime;
    font-size: 25px;
    font-weight: 550;
}*/

.hd{
    color: red;
    font-size: 20px;
    font-weight: 500;
}

p{
    color: blue;
    font-size: 10px;
    font-weight: 400;
}

<div class="parentPar">
    <p>Parent Paragraph 1</p>
    <div id="app">
      <p class="hd">SubHeader paragraph</p>
      <p>Normal paragraph</p>
    </div>
</div>

Answer 3

这与特定性有关，因为您在两种情况下都使用类，但是其中一种也具有级联，因此以通用为准。如果您使用id而不是class作为子标题，则不会发生：

<div class="parentPar">
  <p>Parent Paragraph 1</p>
  <p id="hd">SubHeader paragraph</p>
  <p >Normal paragraph</p>
</div>

CSS:

#hd{
  color: red;
  font-size: 20px;
  font-weight: 500;
}

Answer 4

这是因为您已将p选择器放在样式表的末尾，因此它将覆盖已应用于任何p标签的所有其他样式，也没有app HTML代码中的类，因此.app选择器的应用样式不会显示在任何地方，但是有一个#app选择器。
所以：

p{
    color: blue;
    font-size: 10px;
    font-weight: 400;
}
div .parentPar p{
    color: green;
    font-size: 30px;
    font-weight: 600;
}

div #app p{
    color: lime;
    font-size: 25px;
    font-weight: 550;
}

.hd{
    color: red;
    font-size: 20px;
    font-weight: 500;
}

嵌套组件中的段落标签样式设置问题

4 个答案: