如果没有其他样式,则可以具有默认的CSS样式?

问题描述 投票:0回答:2

我的情况是,我正在从事一个个人投资组合项目(使用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; }
html css reactjs button
2个回答
1
投票


:not

all: unset


听起来您的基本要求是CSS选择器根据样式的存在(或缺乏)选择元素的一种方式。我很确定这是不可能的。
,我建议您考虑利用CSS的“特异性”行为的以下替代解决方案...
当两个选择器与同一元素匹配时,具有最特定匹配的选择器优先。因此,您可以这样做:

button:not(.green) { all: unset; padding: 1rem 2rem; background-color: grey; color: white; } .green { background-color: green; }


0
投票
注意,由于特异性,该顺序无关紧要。当匹配项具有相同特异性时,CSS仅将顺序用作确定因素。您可以将代码更改为以下,并且具有相同的行为:

<button>Submit</button> <button class="green">Submit</button>

请参阅以下文章以进行解释:

https://developer.mozilla.org/en-us/docs/web/css/specificity

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.