如果有一个具有类的元素，如何为某个元素赋予某个CSS属性？

Question

我的HTML：

<div id="login-light" class="bg-green"></div>

我的CSS：

#login-light {
    background-color: red;
}

.bg-green {
    background-color: green;
}

如果我的元素具有类.bg-green时，如何使背景颜色为绿色？我知道id的CSS优先于类。我想在没有JavaScript的情况下尝试这样做。

Answer 1

添加更具体的另一个selector：

#login-light.bg-green {
    background-color: green;
}

Answer 2

您可以转到HTMLDog查看特异性，摘要是页面的底部。 CSS中记录的id比类更具体。

  

计算特异性

     

一组嵌套选择器的实际特异性需要一些计算。基本上，你给每个ID选择器（“#whatever”）一个值100，每个类选择器（“.whatever”）值为10，每个HTML选择器（“whatever”）值为1.然后你将它们全部添加起来，嘿presto，你有特殊的价值。

     

p的特异性为1（1个HTML选择器）   div p的特异性为2（2个HTML选择器，1 + 1）   .tree的特异性为10（1类选择器）   div p.tree的特异性为12（2个HTML选择器+一个类选择器，1 + 1 + 10）