在Html中嵌套CSS类

Question

我需要一些动态项目，我想要的是创建一个类，每个标题元素都需要一些属性，孩子可以是或不是直接后代，但是，在该类中可以是另一个必须覆盖第一类属性的类...我希望这些类嵌套3-4次....有没有办法做到这一点，不要占用太多的CSS空间？

.something1 h1{
  color: green;
}

.something2 h1{
  color: red;
}

<div class='something1'>
  <div>
  <h1>Green</h1>
  </div>
  <div class='something2'>
    <h1>Red</h1>
    <div class='something1'>
      <div><div>
      <h1>Green</h1>
      </div></div>
      <div class='something2'>
        <div>
        <h1>Red</h1>
        </div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/eauwr8zo/1/

Answer 1

在中使用 >

.something1 > h1{
  color: green ;
}

.something2 > h1{
  color: red;
}

<div class='something1'>
  <h1>Green</h1>
  <div class='something2'>
    <h1>Red</h1>
    <div class='something1'>
      <h1>Green</h1>
      <div class='something2'>
        <h1>Red</h1>
      </div>
    </div>
  </div>
</div>

在中使用 !important;

.something1 > h1{
  color: green !important;
}

.something2 h1{
  color: red;
}

<div class='something1'>
  <h1>Green</h1>
  <div class='something2'>
    <h1>Red</h1>
    <div class='something1'>
      <h1>Green</h1>
      <div class='something2'>
        <h1>Red</h1>
      </div>
    </div>
  </div>
</div>

Answer 2

使用直接后代组合子>。

.something1 h1 {
  color: green;
}

.something2 > div > h1, .something2 > h1 {
  color: red;
}

<div class='something1'>
  <div>
  <h1>Green</h1>
  </div>
  <div class='something2'>
    <h1>Red</h1>
    <div class='something1'>
      <div><div>
      <h1>Green</h1>
      </div></div>
      <div class='something2'>
        <div>
        <h1>Red</h1>
        </div>
      </div>
    </div>
  </div>
</div>

或者，如果找不到适合您随机html的>组合，则 然后你可以通过多次添加同一个类来更加具体地添加一个新的选择器。

.something1 h1,
.something1 .something1 h1{
  color: green;
}

.something2 h1,
.something2 .something2 h1 {
  color: red;
}

<div class='something1'>
  <div>
  <h1>Green</h1>
  </div>
  <div class='something2'>
    <h1>Red</h1>
    <div class='something1'>
      <div><div>
      <h1>Green</h1>
      </div></div>
      <div class='something2'>
        <div>
        <h1>Red</h1>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

添加＆＃34;＆gt;＆＃34; simbol到.something1 > h1和.something2 > h1，这样只影响其直接孩子：

＆＃13;

＆＃13;

.something1 > h1{
  color: green;
}

.something2 > h1{
  color: red;
}

＆＃13;

<div class='something1'>
  <h1>Green</h1>
  <div class='something2'>
    <h1>Red</h1>
    <div class='something1'>
      <h1>Green</h1>
      <div class='something2'>
        <h1>Red</h1>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;