如何访问嵌套的css类

Question

我有一个嵌套的css类：

.a {
  b.c {
   color: red;
 }
}

如何访问＆＃39; b.c＆＃39;类？ 我正在使用<p class="a.b.c"></p>， 但是无法工作。

感谢。

Answer 1

您的代码：

.a {
  b.c {
   color: red;
 }
}

可以通过访问

<div class="a"> <!-- parent with class "a" -->
  <b class="c">This text will be red</b> <!-- <b> tag with class "c" -->
</div>

说明

简而言之，当您按原样嵌套时，您说嵌套规则仅适用于与其父选择器匹配的元素内部的元素。您编写的规则是查找具有类<b>的任何c标记，该标记的父级具有类a

将从您的代码输出的CSS将是

.a b.c {color: red;}

如果你想访问一个元素，并且正如你破坏的HTML所示，让b成为一个类而不是一个元素选择器，那么你就可以做你的LESS：

.a {
  &.b.c {
   color: red;
 }
}

可以通过访问

<p class="a b c">
  This text will be red
</p>

Answer 2

据我所知，你不能在课程名称中加点。要为元素分配多个类名，请用空格分隔它们。

<p class="a b c"></p>

您现在可以像这样访问它们：

.a.b.c {
    color: red;
}

或者那样：

.a {
   &.b.c {
    color: red;
   }
}

Answer 3

选择具有“b”和“c”类的任何元素，例如

<p class='a b c'>hello</p>

使用此选择器选择它，因为它匹配类b和c

.b.c {
  color: red;
}

。用于CSS选择器，但在HTML中不使用。在班级名称。

Answer 4

你现在的写作目前并没有达到你想要的目的。 b不是一个类，而是一个元素，所以它不会做你需要的。你需要改变它：

.a {
  .b.c {
   color: red;
 }
}

但是使用当前配置，访问它的唯一方法是执行类似<p class='a'><span class="b c">hello</span></p>的操作。

如果你希望它像你的例子一样工作，那么你应该遵循Chrisstar的答案。