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

我的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（材料设计），它为

元素添加了很多东西

---

我希望将上述CSS应用于某些

元素（仅当它们具有ZZZ类时），并使所有其他元素的行为保持正常。我被卡住了。这在CSS中是可能的吗？

这在CSS中是绝对可能的

要将样式应用于具有相同

类的元素

，只需使用前缀

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

如果要使用

id

，请使用前缀

#

---

要将您想要的css应用于

ZZZ

类的所有项，您应该使用如下代码：

.ZZZ {
    //your code here
}

---

ZZZ

前面的

表示它适用于类为

ZZZ

的项目。这可以在任何类中完成，因为您所要做的就是在类名前加上一个

（句号）。

我认为您考虑得太多了，只需像其他任何时候一样使用css样式，就可以了。参见小提琴：

HTML

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

---

呃，我想应用样式

display:none

到匹配

md-menu-content.md-menu-bar-menu.md-dense.md-menu>.md按钮：在
和
ZZZ
之后，如何执行此操作？
md-menu-content.ZZZ
这将对
ZZZ
类中的任何
md-menu-content
应用样式。如果您使用
md menu content.ZZZ
（带空格），则表示具有类
ZZZ
的任何元素，该类元素是
md menu content
的子元素，我尝试应用样式
display:none
到匹配的项
md-menu-content.md-menu-bar-menu.md-dense.md-menu>.md按钮：在
和
ZZZ
之后如何执行？它们都是单独的元素还是连接在一起？你能给我看一段HTML吗？我知道怎么做，但这取决于html的布局。
<md-menu-content class="ZZZ">
    Hello
</md-menu-content>
<md-menu-content>
    World
</md-menu-content> 

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