如何删除" border-top-width" CSS风格?

时间:2014-04-17 13:56:05

标签: css css3

假设我有一个具有以下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;
}

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

有什么想法吗?

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

您可以使用该类设置顶部应为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

答案 2 :(得分:0)

如果你想要你的顶部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

答案 3 :(得分:-1)

你将边框顶部宽度放在

button.class-name

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

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

border-top-width:2px;