CSS选项卡边框问题答案

【问题标题】：CSS Tabs Border IssueCSS选项卡边框问题
【发布时间】：2011-08-30 07:45:24
【问题描述】：

我无法确定如何操作某些选项卡的边框

如果您已登录http://forums.asp.net/user/editprofile.aspx#，您可以在 ASP.NET 上看到这里的功能

您可以看到，对于 onClick 事件，选项卡的背景颜色会更改为应有的白色。

我与 onClick 的边框有关的问题：

border-bottom 应该从灰色变为白色。左边框和右边框应变为灰色。

同样，当未选择选项卡时：边框底部应从白色变为灰色。左边框和右边框不应该有边框。

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

这是我的小提琴-如果有人可以提供帮助，那就太好了 http://jsfiddle.net/NinjaSk8ter/ZSeFA/

【问题讨论】：

标签： css

【解决方案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，然后您没有修改白色类选项卡底部的边框，因此要么将底部边框声明移出.common-heading-tabs a，要么显式着色bottom-border-color:white !important

希望有帮助！

编辑：

如果您要修改 .left-col 类并添加到它，您请求在选项卡之间设置边框：

.left-col
{
 border-bottom-color: black;
 border-bottom-width: 1px;
 border-bottom-style: solid;
}

这应该可以解决问题，也许你应该去掉其他选项卡上的边框，如果这是你正在寻找的，因为双边框看起来很时髦。

如果我能提供更多帮助，请告诉我

【讨论】：

@Brett 我知道 CSS 非常不同，我从示例站点获得了它。在您的帮助和 Sirvivir 的帮助下，我能够让它发挥作用：jsfiddle.net/NinjaSk8ter/ZSeFA 如果您运行它，您是否会在底部看到我缺少的部分？在选项卡按钮之间？
@Paul - 我要做的是将一些代码添加到类 left-col 的 div 中，我将把它放在我的答案中
@Brett 我还需要修改底部边框吗？正如您所看到的，它跨越所有选项卡，除了被选中的选项卡。
@Paul - 这不是你想要的吗？
@Brett 我相信成功了。我从 Blue Class 中删除了底部边框，现在它就像你建议的那样在 left-col 类中。谢谢！！

【解决方案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>

【讨论】：

@Thomas 我有，正如你在我的小提琴中看到的那样：border-bottom-color:#FFFFFF;边框底部样式：实心；边框底部宽度：1px;

【解决方案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;
}

【讨论】：

你认为删除 .common-heading-tabs a.selected 是否安全

【解决方案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 移动到 .blue。

【讨论】：