Question

我试图在这里帮助一个StackOverflow成员，我发现CSS :target选择器不能与选项标签一起使用。我创建了一个使用w3schools tutorial进行说明的示例，代码是：

:target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

<select>
    <option><a href="#image1">This doesn't work!</a></option>
    <option><a href="#image2">Selection2</a></option>
    <option><a href="#image3">Selection3</a></option>
</select>

<p><a href="#image1">This Works!</a></p>

<div id="image1">1</div>
<div id="image2">2</div>
<div id="image3">3</div>

知道为什么吗？我做错了什么？

Answer 1

这是因为选项不允许其中的其他元素。

只有解决方案是使用Javascript我猜/

Answer 2

<option>标记只能包含文本内容，因此浏览器会忽略其他标记，并仅显示文本。您可以检查呈现的HTML，您可以看到我在说什么。在这种情况下，渲染为：

<select>
    <option>This doesn't work!</option>
    <option>Selection2</option>
    <option>Selection3</option>
</select>

：目标选择器不适用于选项标记

2 个答案: