在 CSS [外部样式表] 中应用多个类

Question

我只是试图将这种类型的css类应用于p元素。是的，我正确地引用了外部样式表。

.no_curators_followed .no_curators_ctn p {
color: #c6d4df;
font-size: 17px;
}

但是，当我尝试它时没有任何效果...

<p class="no_curators_followed no_curators_ctn p">HELLO WORLD</p>

Answer 1

当你写class1 class2 class3 { styles }时，你选择的class3元素是class2的子元素，class1的子元素。您没有选择具有所有这 3 个类的元素。

要在CSS中选择<p class="class1 class2 class3">元素，您应该编写.class1.class2.class3(无空格)

.class1.class2.class3 {
color: red;
}

<p class="class1 class2 class3">Select me</p>

如果你想更具体地将元素的标签名称(p，h1，a，li等)添加到选择器中，你应该像这样添加不带点(.)p.class1.class2.class3

编辑

在您发表评论后，我了解您需要使用无法编辑的样式。因此，要使用该样式，HTML 结构应如下所示：

.no_curators_followed .no_curators_ctn p {
color: #c6d4df;
font-size: 17px;
}

<div class="no_curators_followed">
<div class="no_curators_ctn">
<p> Change me </p>
</div>
</div>

Answer 2

你现在编写CSS的方式是像下面这样写的html：

<div class="no_curators_followed">
<div class="no_curators_ctn">
<p>HELLO WORLD</p>
</div>
</div>

对于像这样的 html

<p class="no_curators_followed no_curators_ctn p">HELLO WORLD</p>

你可以只使用

.no_curators_followed{
color: #c6d4df;
font-size: 17px;
}

Answer 3

如果您无法更改 CSS，并且只能访问 HTML，那么此 CSS.no_curators_followed .no_curators_ctn p的正确语法是：

<div class="no_curators_followed">
<div class="no_curators_ctn">
<p>HELLO WORLD</p>
</div>
</div>

因为.no_curators_followed .no_curators_ctn p意味着父元素是类no_curators_followed的元素，它有一个类no_curators_ctn的子元素，它的元素是p

Answer 4

你必须在样式表中这样使用

删除拖曳类之间的空格并添加.(点)在P类之前

.no_curators_followed.no_curators_ctn.p {
color: #c6d4df;
font-size: 17px;
}