（这可能是一个初学者问题，欢迎您将我的其他文档或问题推荐给我）
我想在css中创建子类。我想要一组常规按钮，如btn.general.X (btn general plain, btn general alert, btn general secondary)和一组侧边栏按钮，如btn.sidebar.X (btn sidebar general, btn sidebar alert, btn sidebar secondary)。
有没有办法拆分.btn.general类，以便它不适用于所有子类。我的示例显示了我想要创建两组不同的按钮，但是目前任何具有btn和general类的按钮都会获得.btn.general样式。我不希望.btn.sidebar.general获得.btn.general风格。
我检查了我所知道但我不知道如何解决这个问题。
.btn.general {
border: 1px solid red;
}
.btn.sidebar {
background-color: orange;
}<html>
<div class="main">
<div class="container">
<button class="btn general plain" (click)="Login()">Login</button>
<button class="btn general plain" disabled>Toets Button</button>
<br><br>
<div style="background-color: rgb(196, 196, 196); width: 150px;">
<button class="btn sidebar general">Dashboard</button>
<button class="btn sidebar general">Global</button>
<button class="btn sidebar general">System</button>
<button class="btn sidebar general">Preferences</button>
</div>
</div>
</div>UPDATE
因此，经过所有答案后，我认为我的做法是错误的。如果你想要.btn.general不能应用于btn.sidebar.general然后制作第一个.btn-general，然后添加.btn-general.foo（.error / .plain），并使用侧边栏做.btn -sidebar.foo（.error / .plain）。对CSS进行分组似乎是一个非常值得商榷的主题，所以我想你可以选择适合自己的东西。
@Paulie_D以下评论中的这个链接有很多帮助：https://css-tricks.com/bem-101/
使用not CSS选择器。
.btn.general:not(.sidebar) {
border: 1px solid red;
}
.btn.sidebar {
background-color: orange;
}<html>
<div class="main">
<div class="container">
<button class="btn general plain" (click)="Login()">Login</button>
<button class="btn general plain" disabled>Toets Button</button>
<br><br>
<div style="background-color: rgb(196, 196, 196); width: 150px;">
<button class="btn sidebar general">Dashboard</button>
<button class="btn sidebar general">Global</button>
<button class="btn sidebar general">System</button>
<button class="btn sidebar general">Preferences</button>
</div>
</div>
</div>可以选择在css中使用属性选择器。在输入--input[type='text']等元素的情况下，通常使用属性选择器。您也可以在这里尝试相同的方法。请查看以下示例。
button[class='btn general']{
background: green;
}<button class="btn general">Login</button>
<button class="btn general sidebar">Toets Button</button>您需要在层叠样式表中使用级联。
首先，确定所有按钮共有的样式：
button {
[... Styles which apply to all buttons in the document... ]
}
然后，确定哪些样式仅适用于按钮子集：
.container button {
[... Specific styles which only apply to buttons in .container ... ]
}
然后，确定哪些样式适用于更具体的按钮子集：
.container .sidebar button {
[... More specific styles which only apply to buttons in .container .sidebar... ]
}
工作实例：
button {
margin: 12px;
padding: 6px;
font-weight: bold;
}
.container button {
font-style: italic;
border: 2px solid rgb(255, 0, 0);
}
.container .sidebar button {
font-style: normal;
background-color: rgb(255, 127, 0);
}
main {
background-color: rgb(227, 227, 227);
}
.container {
background-color: rgb(191, 191, 191);
}
.sidebar {
background-color: rgb(127, 127, 127);
}<main>
<button>Button 1</button>
<button>Button 2</button>
<div class="container">
<h2>Container</h2>
<button>Button 3</button>
<button>Button 4</button>
<div class="sidebar">
<h3>Sidebar</h3>
<button>Button 5</button>
<button>Button 6</button>
</div>
<button>Button 7</button>
<button>Button 8</button>
</div>
</main>
<p>All buttons have <strong>bold text</strong>.</p>
<p>All buttons in <code>.container</code> have a <span style="color: rgb(255, 0, 0);">red border</span>.</p>
<p>All buttons in <code>.sidebar</code> have an <span style="color: rgb(255, 127, 0);">orange background</span>.</p>
<p><strong><em>But...</em></strong> note that the text in the <code>.sidebar buttons</code> is not <em>italic</em> because it has a more specific declaration than all other buttons in <code>.container</code>.</p>我想我现在理解你正在看它的方式。
第一个 - 你需要知道的非常重要的事情 - 是CSS类没有空格。
当你看到这样的事情：
class="button magical spell"
你正在看的是一个以空格分隔的类列表。该元素应用了类.button，应用于它的类.magical和应用于它的类.spell。
如果，在别处，你这样：
class="button magical wand"
该元素应用了类.button，应用于它的类.magical和应用于它的类.wand。
也就是说，两个元素都有适用于它们的类.button和.magical。