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

Question

我有以下内容：

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

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

[id]:target {background:pink;}

这很有效。但是，当我使用它时：

[id]:target + b {}

这不起作用。 CSS无法实现这一点吗？ 我希望我可以在项目周围包裹一个标签，但我没有这个选项。

Answer 1

如果您使用属性＆＃34; name＆＃34;它将无效。然后寻找＆＃34; id＆＃34;在你的CSS中。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这会使A和B变为粉红色（在Chrome / Firefox中测试）

Answer 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>