html - CSS :target random #keyword, 用相同的 div 做一些事情

Question

我有一些链接，每个链接都有一个唯一的 href。

假设链接有 href="#first"。 链接二有 href="#second"。 那么用 div 做某事的 CSS 是什么？ (带证件盒)

我试过很多东西，比如:

#first:target #box{
    something..
}
#second:target #box{
    something else..
}

#linkOne:hover #box{ width:200px;

这通过悬停#linkOne 来更改#box 的大小我希望对:target 发生同样的情况，例如通过单击链接更改#box 的大小

Answer 1

如果你想选择当前的目标元素，你可以简单地做 :target

html

<a href="#first">first link</a>
<a href="#second">second link</a>
<div id="first">first div</div>
<div id="second">second div</div>

CSS

:target {
    border: 1px solid red;
}

点击链接对应id的div会有红色边框。

http://jsfiddle.net/wk3rR/2/

更新

从您的评论来看，您似乎想要使用不同的当前目标来操作同一个框，这不是直截了当的，但是如果您嵌套 <div> 就可以做到s 与 ID，然后您的原始 css 应该可以工作:

<a href="#first">first link</a>
<a href="#second">second link</a>
<div id="first">
    <div id="second">
        <div class="box">box</div>
    </div>
</div>

CSS

#first:target .box {
    border: 1px solid red;
}
#second:target .box {
    border: 1px solid yellow;
}

http://jsfiddle.net/wk3rR/3/