gpt4 book ai didi

html - 了解 Css 分组

转载 作者:太空宇宙 更新时间:2023-11-03 21:07:49 29 4
gpt4 key购买 nike

(这可能是一个初学者问题,欢迎您向我推荐其他文档或问题)

我正在尝试在 css 中创建子类。我想要一组常规按钮,如 btn.general.X (btn general plain, btn general alert, btn general secondary) 和一组侧边栏按钮,如 btn.sidebar.X (btn侧边栏一般,btn 侧边栏警报,btn 侧边栏辅助)

有没有办法拆分.btn.general 类,使其不应用于所有子类。我这里的例子展示了我想如何创建两组不同的按钮,但目前任何具有 btngeneral 类的按钮都将获得 .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>

更新

所以在看完所有答案后,我认为我的方法是错误的。如果你不想将 .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 选择器。

See this

.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>

关于html - 了解 Css 分组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50794680/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com