如何有选择地应用CSS规则？

Question

我的css文件中有以下内容：

md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button:after{
    display:none;
}

这是我的HTML：

<md-menu-content class="ZZZ">
    Hello
</md-menu-content>

我有一些Javascript（材料设计），它为<md-menu-content>元素添加了很多东西。

我想将上述CSS应用于某些<md-menu-content>元素（仅当它们具有ZZZ类时），并让所有其他元素正常运行。我很困难。这在CSS中是否可行？

Answer 1

要将您想要的css应用于ZZZ类的所有项目，您应该使用以下代码：

.ZZZ {
    //your code here
}

.之前的ZZZ表示它适用于具有班级ZZZ的项目。这可以在任何类中完成，因为您所要做的就是在类名前加上.（句点）。

Answer 2

我认为你已经在考虑这个问题了，只需像其他任何时候一样使用 css 样式，它就可以了。请参阅小提琴：https://jsfiddle.net/pyexm7us/3/

<强> HTML

<md-menu-content class="ZZZ">
    Hello
</md-menu-content>
<md-menu-content>
    World
</md-menu-content> 

<强> CSS

md-menu-content{background-color: red; color: white;}
.ZZZ{background-color: blue; color: white;}

Answer 3

使用CSS

绝对可以

要将样式应用于具有相同class的元素，只需使用前缀.

.ZZZ {
    //styling for elements with class ZZZ
}

如果您想使用id，请使用前缀#

#ZZZ {
    //styling for elements with the ID ZZZ
}