如何在不触及HTML的情况下覆盖css类？

Question

我编写了一个非常简单的codepen，并尝试在h1元素中覆盖一个css类，尝试使用ONLY css。

是否有可能，我可以在H1附近添加一个div，但我无法触及H1 html，这可能吗？

override H1 css with surrounding div

  [1]: http://codepen.io/Satearn/pen/grWjGJ

.b2
{color:green;}
.a1
{color:red;}

<div class="b2">
 <h1 class="a1">Hello</h1>
</div>

Answer 1

是的，当然有可能。您只需将选择器更改为：

.b2 .a1 {color:green;}

即添加空格。

你拥有的这个选择器：.b2.a1（没有空格）适用于每个具有两个类的元素，这些不是你想要的。

此选择器：.b2 .a1（带空格）适用于任何类，其类为a1 ，是任何具有.b2类的元素的后代 - 这正是你需要什么。

Answer 2

要覆盖CSS规则，您需要将其置于原始规则之后，或使用更高specificity 作为新规则。

请记住，在这两种情况下，您都需要选择相同的元素，否则子元素规则将始终具有更高的优先级。

在您的情况下，您选择的是不同的元素，因此覆盖规则很简单：

.a1 {color:green;}

或者，如果您只想在父级为.b2时覆盖颜色：

.b2 .a1 {color:green;}

不确定CodePen中的.b2.a1是否为拼写错误，但只会选择同时包含b2和a1类的元素，例如<div class="b2 a1"></div>。