如何在css中选择目标元素之后的下一个项目？答案

【问题标题】：How do I select the next item after a target element in css?如何在css中选择目标元素之后的下一个项目？
【发布时间】：2014-12-25 04:07:17
【问题描述】：

我有以下内容：

<a name="a"></a><b>A</b>

我想选择下一项，<b>，并在目标选择时突出显示它。要选择 a 标记中的任何内容，我使用：（例如）

[id]:target {background:pink;}

这行得通。但是，当我使用这个时：

[id]:target + b {}

这不起作用。这对 CSS 来说是不可能的吗？我希望我可以在项目周围加上 a 标签，但我这里没有那个选项。

【问题讨论】：

标签： html css

【解决方案1】：

如果您使用属性“name”然后在 CSS 中查找“id”，它将不起作用。

[id]:target { background:pink; }
[id]:target + b { background:pink; }

<a id="a">A</a>
<b>B</b>
<a href="#a">Turn pink!</a>

这会将 A 和 B 都变成粉红色（在 Chrome / Firefox 中测试）

【讨论】：

【解决方案2】：

更新您的 HTML 以使用 ID 或更新您的 CSS 选择器以查找 name 属性：

[name]:target {background:pink;}
[name]:target + b {background:blue; color:white;}

<a href="#a">focus</a> | <a href="#">blur</a>
<br />
<a name="a">I am the A </a><b>I am the B</b>

【讨论】：