Question

假设我有一个具有以下CSS样式的Button：

Button {
    border:2px #eee solid;
    border-top-width: 5px;
}

这将生成一个2px边框颜色为#eee的按钮，但顶部边框的厚度为5px。

现在，让我们说我有另一个继承此样式的按钮，但对于这个新Button，我想删除border-top-width属性。

所以我的问题是，如何将border-top-width设置为null或侦听默认边框样式？以下内容不起作用，但显示了我尝试做的事情：

Button.class-name {
    border-top-width: auto;
}

请注意，在我的情况下，我无法将值设置为＆＃34; 2px＆＃34;。我需要完全删除该值。我已经尝试过＆＃34; auto＆＃34;，＆＃34;继承＆＃34;，＆＃34; initial＆＃34;等等......似乎没有任何东西可以删除＆＃34; border-top -width＆＃34;财产...

有什么想法吗？

Answer 1

CSS建议使用initial value将其重置为浏览器的默认值。

没有办法（也没有提议的方法）将它设置为前一个设置它的值，但是设置它的规则。

如果您希望从border:2px #eee solid;获取值，则必须明确将其设置为2px。

如果您使用的是CSS预处理器，例如SASS，则可以使用变量：

$defaultBorderWidth: 2px;
Button {
    border:$defaultBorderWidth #eee solid;
    border-top-width: 5px;
}
Button.class-name {
    border-top-width: $defaultBorderWidth;
}

您也可以将此技术用于native CSS variables。

Answer 2

您可以使用该类设置顶部应为5px的按钮的宽度：

button {
    border:2px #eee solid;       
}

button.class-name {
    border-top-width: 5px;
}

您也可以使用:not() CSS选择器：

button{
    border:2px #eee solid;
}

button:not(.normal) {
    border-top-width: 5px;
}

Fiddle

Answer 3

如果你想要你的顶部border-top-width是null，你可以这样使用;

HTML代码

<button>Press me</button>
<button>Hit me</button>
<button class="leave-me">Leave me</button>

CSS代码：

button{
     border:2px #eee solid;
    border-top-width: 5px;
}

button.leave-me{
    border-top-width:initial;
}

JSFIDDLE

Answer 4

你将边框顶部宽度放在

上

button.class-name

或者不是在css上调用该属性，而是直接在你的html上调用它。

或者，您也可以在第二个按钮上拨打

border-top-width:2px;

如何删除＆＃34; border-top-width＆＃34; CSS风格？

4 个答案: