时间戳

首页 > 解决方案 > 如何防止我的通用 * { ... } 样式覆盖父标签

html - 如何防止我的通用 * { ... } 样式覆盖父标签

问题描述

如何防止我的通用* { ... }样式覆盖父标签？在下面的示例中，我希望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 行的其余部分相同

标签： htmlcss

解决方案

之前使用通用选择器，因此可以在不使用!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>

推荐阅读