我的情况是,我正在从事一个个人投资组合项目(使用React和Django,但可能与此问题无关),并且每个项目都将具有自己的样式。但是,我希望我的网站本质上是我想做的任何事情。因此,该网站具有自己的统一样式,而每个项目单独可能具有不同的样式。
具体情况是使用按钮。我已经在基本按钮样式中添加了一个all: unset;
,以确保我可以单独使用每个按钮类型(如果担心这一点,我还会考虑重点和可访问性)。我的希望是从本质上构建自己的“默认”按钮样式,如果通过较高的选择器应用样式,则完全被覆盖。因此:
button {
all: unset;
padding: 1rem 2rem;
background-color: grey;
color: white;
}
.green {
// all: unset;
background-color: green;
}
<button>Submit</button>
<button class="green">Submit</button>
这里,右侧的按钮具有所有相同的样式,但背景颜色不同。但是,理想情况下,我想要的是如果您在
all: unset;
中取消注释,所有样式都被删除了,并且留下了一个空白的画布,可以再次写入。显然,将
.green
添加到类选择器给我的期望结果,但是我想知道是否有一种更简单的方法而无需为每种新样式指定?在整个样式中添加多个标签似乎并不整洁,但不幸的是,我不知道任何更好的方法。谁能帮忙?
在编码语言中,我本质上想要以下逻辑,但在CSS中:
all: unset;
很高兴在必要时提供任何额外的信息。
一个想法可以是在默认样式上使用CSS
all: unset;
选择器,以避免使用特定类以使用IT
您的默认样式将执行
if (no selectors in element) {
default-styles;
} else {
selector-styles;
}
:not
all: unset
,我建议您考虑利用CSS的“特异性”行为的以下替代解决方案...
button:not(.green) {
all: unset;
padding: 1rem 2rem;
background-color: grey;
color: white;
}
.green {
background-color: green;
}
<button>Submit</button>
<button class="green">Submit</button>
请参阅以下文章以进行解释:
https://developer.mozilla.org/en-us/docs/web/css/specificity