假设我有一个具有以下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"财产...
有什么想法吗?
答案 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;
}
答案 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;
}
答案 3 :(得分:-1)
你将边框顶部宽度放在
上button.class-name
或者不是在css上调用该属性,而是直接在你的html上调用它。
或者,您也可以在第二个按钮上拨打
border-top-width:2px;