Question

我有一个div，其中嵌套了一行标签，如下所示：

<div class="container">
    <div class="menu">
        <span class="tab" />
        <span class="activetab" />
        <span class="tab" />
    </div>
</div>

当标签处于活动状态时，我们需要在其周围显示边框。 container div也有边界;但是，它需要更轻。所以我们有这样的事情：

.container {border: 1px solid lightgray;}
.activetab {border: 1px solid gray;}

似乎因为容器是活动选项卡的父级，其边框具有优先级，但我们希望显示活动选项卡的较暗边框。我们尝试了边界和轮廓。

帮助！

Answer 1

这是您的类属性的主要问题。别放。在HTML中：

<div class=".container">

应该是

<div class="container">

之后，您应该对border-color值没有任何问题。只要你的选择器是明确的，而不是一般的，就不会有混淆：

.container { border:1px solid red;   }
.activetab { border:1px solid green; }

应该正确呈现。但请记住，类只有一个前缀。（点）在您的选择器中，而不是您的HTML。

Answer 2

首先，不确定为什么你要在html标签中的类名前加一个点..那甚至可以工作吗？它应该在CSS中看起来像<div class="container">然后是.container{....}。

如果您正在尝试制作CSS菜单，那么我建议您使用无序列表，这非常标准：

<div class="container">
  <ul class="menu">
    <li>Item 1</li>
    <li class="activetab">Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

然后在你的CSS中，例如：

.container {border: 1px solid lightgray;}
.container ul{list-style:none;}
.container li{float:left;}
.container li.activetab {border: 1px solid gray;}

覆盖父div的边界与子跨度的边界

2 个答案: