Question

好的，这有点难以解释;因此，它也很难搜索，所以我只想在这里问。

基本上我有一个CSS类，我正在申请某些DIV。在每个类中，我希望只有在DIV

中才能应用于某些选择器的规则

例如，让我说我有一个像这样的CSS类

  .main_wrapper {
        text-align: center;

        h1
    {
        color: blue;
    }

    }

    .question_wrapper  {
        text-align: left;

        h1
    {
        color: red;
    }
    }

然后让我们说我有像这样的HTML

<div class="main_wrapper">

    <h1>Test 1</h1>

    <div class="question_wrapper">

        <h1>Test 2</h1>

    </div>

</div>

我想用CSS实现的是main_wrapper div中的h1标记为蓝色，而question_wrapper中的h1标记为红色。

我知道我在这里使用的CSS并不起作用，但这基本上就是我想要完成的。

我希望这是有道理的。

如果有人有任何想法会很棒。

Answer 1

你必须使用它：

.main_wrapper > h1{
   color:blue;
}

.question_wrapper > h1{
   color:red;
}

>表示在>

之前的直接孩子

Answer 2

您可以使用＆＃39;＆gt;＆＃39;用于选择子元素的运算符。

.main_wrapper > h1 {
color: blue;
}

.question_wrapper > h1{
color:red;
}

Answer 3

如果这是您的SCSS

 .main_wrapper {
        text-align: center;

        h1
    {
        color: blue;
    }

    }

    .question_wrapper  {
        text-align: left;

        h1
    {
        color: red;
    }
    }

这将是你的CSS

.main_wrapper {
  text-align: center;
}
.main_wrapper h1 {
  color: blue;
}

.question_wrapper {
  text-align: left;
}
.question_wrapper h1 {
  color: red;
}

......它会起作用。

Sassmeister Gist Demo

如何在CSS类中为元素设置不同的标题规则

3 个答案: