Question

我有两种情况需要正确设计：

<div class="tabs">
  "Tab 1"
   <a href="/1"="tab">Tab 2</a>
</div>

和

<div class="tabs">
  <a href="/2" class="tab">Tab 1</a>
  "Tab 2" 
</div>

我想在选项卡1和选项卡2之间使用填充。如何在不将文本（非活动选项卡）放入其自己的HTML标记的情况下正确指定这些内容。

CSS中是否有一种方法可以指定类似于文本类型的子项？

因此，如果Tab 1处于活动状态（第一种情况），我想在a元素上填充（表2）：

padding-left: 10px

如果Tab 2处于活动状态（第二种情况），我想在a元素上添加填充（选项卡1）：

padding-right: 10px

Answer 1

你可以尝试下面的css

   /* for visited link*/
  a:active {
      padding-left: 10px;
  }

Answer 2

您可以添加以下css

.tabs{background:#f2f2f2; border:1px solid #ccc; display:inline-block;}
.tabs.active:nth-child(1){padding-left: 10px}
.tabs.active:nth-child(2){padding-right: 10px}

并且您可以在单击选项卡或预期事件后应用活动类。在下面的html中，我已将活动类添加到两个选项卡中以分别显示填充应用程序

<div class="tabs active">
tab1
</div>

<div class="tabs active">
tab2
</div>

样式嵌套文本与HTML标记兄弟

2 个答案: