Question

我有问题确定如何操作某些标签的边框

enter image description here

如果您已登录http://forums.asp.net/user/editprofile.aspx#

，则可以在ASP.NET上看到此功能

您可以看到onClick事件，Tab的背景颜色变为白色，就像它应该的那样。

我与onders上的Borders有关的问题：

边框底部应从灰色变为白色。 border-left和border-right应该变为灰色。

同样，当未选择Tab时：边框底部应从白色变为灰色。 border-left和border-right不应该有边框。

在我的CSS中，我使用了蓝色和白色类的JavaScript。但是我也有：.common-heading-tabs a.selected，这让我很困惑。

这是我的小提琴 - 如果有人可以帮助它会很棒 http://jsfiddle.net/NinjaSk8ter/ZSeFA/

Answer 1

我刚刚修改了.white的CSS类，你的CSS标记不是标准：

border-left-color: #A0AFC3;
border-left-style: solid;
border-left-width: 1px;

此外，为了让底部边框消失，你有两种选择之一，你可以选择其中一种

从.common-heading-tabs a类中移除底部边框并将其添加到.blue类
将border-bottom-color:white !important;添加到.white类

您看到自己所处行为的原因是因为标准标签有边框（来自.common-heading-tabs a），当您切换到白色时，您尝试更改颜色或某些边框，但是您使用了border-left-color-value而不是简单的border-left-color，然后您没有修改白色类的选项卡底部的边框，因此将底部边框声明移出{{1} }或明确着色.common-heading-tabs a

希望有所帮助！

修改：

您要求在标签页之间运行边框，如果您要修改课程bottom-border-color:white !important并添加它：

.left-col

这应该是诀窍，也许你应该摆脱其他标签上的边框，如果这是你正在寻找的，因为双边框看起来很时髦。

如果我能帮助我，请告诉我

Answer 2

有关使底部边框为白色的示例，请参阅

<html>
<head>
<style type="text/css">
p 
{
border-style:solid;
border-bottom-color:white;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>

</html>

Answer 3

你继承了一些继承权。将显式值添加到.blue类，将important添加到.white中的显式值。

.blue {   
    background-color: #D7DFEA;
    border-bottom: 1px solid #fff;
    border-top: none;
    border-left: none;
    border-right: none;
}
.white {   
    border-bottom: 1px solid #fff !important;
    border-top: 1px solid #A0AFC3;
    border-left: 1px solid #A0AFC3;
    border-right: 1px solid #A0AFC3;
    background-color: white;
}

Answer 4

据我所知，问题是虽然.common-heading-tabs a和.white都应用于链接，但前者是“更具体”的CSS类，这意味着浏览器会给出确定要应用的样式时，它是优先的。

如果您想确保.white样式覆盖边框，可以将!important添加到边框样式：

.white {   
    background-color: white !important;
    border-bottom-color: #FFFFFF !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    ...
}

或重新设计类的设备，使得开始时不应用冲突的边框样式，在您的情况下，例如可以将蓝色边框样式从.common-heading-tabs a移动到{{1} }。

CSS选项卡边框问题

4 个答案: