如何设置此css仅适用于指定的类？

Question

给出以下标记：

<div class="my_class"></div>

以及以下css：

.sidebar .nav { width: 95%; }
.sidebar-nav{ left: -200px; }
.sidebar-nav.active{ left: 0; }

如何让上述样式仅适用于my-class类的儿童 ？

Answer 1

据我了解，您希望以下css 仅适用于.my_class的子女。

如果是这样，请将您的CSS更改为：

.my-class .sidebar .nav { width: 95%; }
.my-class .sidebar-nav{ left: -200px; }
.my-class .sidebar-nav.active{ left: 0; }

请注意，如果您sidebar之外有sidebar-nav或my-class ，则他们无法获得上述样式。

在MDN上查看Specificity。

Answer 2

.my-class .sidebar .nav { width: 95%; }
.my-class .sidebar-nav{ left: -200px; }
.my-class .sidebar-nav.active{ left: 0; }