Question

我的html中有这个：

<div>
  <ul id="tabs">
    <li id="h1">
      <a href="#h1">Home</a>
      <div>
        text here
      </div>
    </li>
    <li id="h2">
      <a href="#h2">Services</a>
      <div>
        text here
      </div>
    </li>
  </ul>
</div>

我想要做的是将列表项内联，同时隐藏其内容。只有当我按下列表项链接时才会显示内容。这就是我迄今为止在css上所尝试的内容：

li {
  display: inline;
}

li div {
  display: none;
}

li:target {
  display: block;
}

然而，这种做法不起作用。显示：块;没有覆盖显示：无;

提前致谢！

Answer 1

li:target仅指向目标的li元素本身。将li的display属性设置为block不会影响将div属性设置为display的包含none。实际上，它只会覆盖display: inline上定义的li。

如果要显示目标div元素内的li，则需要调整选择器以实际匹配该div。例如，使用li:target div来匹配原始规则的特异性：

＆＃13;

li {
  display: inline;
}

li div {
  display: none;
}

li:target div {
  display: block;
}

＆＃13;

<div>
  <ul id="tabs">
    <li id="h1">
      <a href="#h1">Home</a>
      <div>
        text here
      </div>
    </li>
    <li id="h2">
      <a href="#h2">Services</a>
      <div>
        text here 2
      </div>
    </li>
  </ul>
</div>

＆＃13;

隐藏div并在目标时显示它

1 个答案: