将 css 应用于覆盖更高说明符的所有段落元素

Question

我怎样才能一次将 CSS 应用于 html 文档的所有段落元素，以便它也覆盖更高的说明符我也知道 * select 或者 select 所有元素

 .about-box p{
        font-family: Montserrat-Regular;
        font-size: 14px;
        line-height: 16px;


    }

现在，如果我按照 css 进行申请，它将无法像上面给出的那样在更高的说明符上工作

 p{

        font-size: 20px;

    }

我试过使用 *P body>p 。

Answer 1

有两种方法可以做到这一点。你要么使用 !important:

.about-box p {
  font-family: Montserrat-Regular;
  font-size: 14px;
  line-height: 16px;
}

p {
  font-size: 20px !important;
}

<div class="about-box">
  <p>
    test
  </p>
</div>
<p>
  test2
</p>

或者你在更高级别的元素上设置一个 id，比如 body:

#body p {
  font-size: 20px;
}

.about-box p {
  font-family: Montserrat-Regular;
  font-size: 14px;
  line-height: 16px;
}

<body id="body">
  <div class="about-box">
    <p>
      test
    </p>
  </div>
  <p>
    test2
  </p>
</body>

Answer 2

您需要了解 CSS cascading 的工作原理，在本例中，了解 Specificity 的工作原理。 .about-box p 比普通的 p 更具体，因此你永远不能单独用 p 覆盖 .about-box p 中定义的样式，除非你想使用可怕的 !important语法（这通常是个坏主意）。

在我看来，您想覆盖 .about-box p 中定义的 font-size。如果是这样，为什么不直接 modify/remove 呢？如果你不会，你也可以这样做：

.about-box p{
    font-family: Montserrat-Regular;
    font-size: 14px;
    line-height: 16px;
}

p, .about-box p {
    font-size: 20px;
}

编辑：根据您的评论，这听起来像是 "this is not my code I'm just trying to fix this one thing" 的另一种情况。我仍然强烈建议您进行搜索并删除 CSS.

中为 p 定义的所有 font-size

CSS 定义无法覆盖更高级别的说明符而不是同一级别或更高级别（除非按重要性）。现在的问题是我们无法查看您是否只有这个 class 可以覆盖，或者还有更多您没有提到的。看不到全貌，没办法给出宝贵的建议。

毫无疑问，!important 是最快的解决方案，但也几乎总是一个糟糕的解决方案。

Answer 3

查看我的代码，

.about-box p {
  font-family: Montserrat-Regular;
  line-height: 16px;
}        
p {
  font-size: 20px;
}

<div class="about-box">
  <p>Paragraph 1</p>
</div>
<p>Paragraph 2</p>

Answer 4

贼难捉贼

可能没有正确的方法来纠正错误。但以下可以帮助您解决或实现您想要的。

您需要的是 class 和 id 选择器的帮助，作为高级说明符，以便它们覆盖其他高级说明符。

解决方案：

html [class] > p, 
html * > * > p,
html [class] > * > p,
html [id] > * > p,
html [class] > * > * > p,
html [id] > * > * > p {
    font-size: 20px;
}

.about-box p {
    font-family: Montserrat-Regular;
    font-size: 14px;
    line-height: 16px;
}

<div class="row">
    <div class="about-box">
        <h2>About Us</h2>
        <p>some paragraph goes here ....</p>
    </div>
    <div class="col-sm-12">
        <div class="thumbnail">
            <div class="caption">
                <h2 class="text-center">Your Books & Book Proposals:</h2>
                <p>paragraph goes here </p>
                <p>paragraph here</p>
            </div>
        </div>
    </div>

@huelfe 感谢 jsFiddle 代码，使用了你的 HTML.

还分享 Codepen 来调整代码并尝试一下。

将 css 应用于覆盖更高说明符的所有段落元素

Applying css to all paragraphs elements that overrides higher specifiers also

html

css

stylesheet

web

解决方案：