如何防止我的通用* {…}样式覆盖父标记

Question

如何防止我的通用* { ... }样式覆盖父标记？在下面的示例中，我希望sssssssss的样式为text-huge

.text-huge {
  font-size: 28px !important;
  color: green !important;
}

* {
  font-size: 12px;
  font-family: Verdana;
  color:red;
}

<form>
  <div>
    <p><span class="text-huge">line 1: aaaaaa<strong>sssssssss</strong>aaaaaaaa</span></p>
    <p>line 2</p>
  </div>
</form>

我希望sssssssss与第1行的其余部分具有相同的字体颜色和大小

Answer 1

之前请使用通用选择器，因此无需使用!important就可以覆盖其他所有内容。

* {
  font-size: 12px;
  font-family: Verdana;
  color: red;
}

.text-huge,
.text-huge * {
  font-size: 28px;
  color: green;
}

<form>
  <div>
    <p><span class="text-huge">line 1: aaaaaa<strong>sssssssss</strong>aaaaaaaa</span></p>
    <p>line 2</p>
  </div>
</form>

Answer 2

避免使用*，而是使用Inherit！ :)会有更好的表现。

.text-huge {
  font-size: 28px !important;
  color: green !important;
}

.text-huge strong {
  font-size: inherit;
  font-family: Verdana;
  color:inherit;
}

<form>
  <div>
    <p><span class="text-huge">line 1: aaaaaa<strong>sssssssss</strong>aaaaaaaa</span></p>
    <p>line 2</p>
  </div>
</form>

Answer 3

最好在您的样式中使用子代选择器。

.text-huge,  .text-huge > * {
  font-size: 28px !important;
  color: green !important;
}

   

* {
  font-size: 12px;
  font-family: Verdana;
  color:red;
}

<form>
  <div>
    <p><span class="text-huge">line 1: aaaaaa<strong>sssssssss</strong>aaaaaaaa</span></p>
    <p>line 2</p>
  </div>
</form>

或者您可以为.text-huge元素的子元素创建单独的样式。

.text-huge {
  font-size: 28px !important;
  color: green !important;
}
.text-huge > * {
  font-size: 28px !important;
  color: green !important;
}

* {
  font-size: 12px;
  font-family: Verdana;
  color:red;
}

<form>
  <div>
    <p><span class="text-huge">line 1: aaaaaa<strong>sssssssss</strong>aaaaaaaa</span></p>
    <p>line 2</p>
  </div>
</form>