在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。您没有选择所有这三个类的元素。

要在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等）的标签名称添加到选择器，则应像这样{{1 }}

编辑

在发表评论后，我了解到您需要使用无法编辑的样式。因此，要使用该样式，HTML结构应类似于：

.

p.class1.class2.class3

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;
}

Answer 5

您错过了。之后。最好使用简短的类名

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

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