更新

Question

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

让我们说链接一个有href =“＃first”。和链接两个有href =“＃second”。然后CSS会用div做什么？（带ID框）

我尝试过很多东西：

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

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

这会通过悬停#linkOne来改变#box的大小我希望发生同样的情况：目标，比如通过点击链接更改#box的大小

Answer 1

如果我没错，你正在寻找类似下面的内容。这会将当前目标元素的height设置为20px。过渡效应也将被应用。

<强> HTML：

<a href='#first'>First</a>
<a href='#second'>Second</a>

<div id='first'>This is first div</div>
<div id='second'>This is second div</div>

<强> CSS：

#first, #second {
    height: 0px;
    overflow: hidden;
    transition: height 1s ease-in;
}
#first:target {
    height: 20px;
}
#second:target {
    height: 20px;
}

Demo Fiddle

编辑：我知道您还没有标记jQuery / JavaScript，并且正在寻找CSS解决方案。但是如果你有很多这样的链接，并且可以使用基于JS的解决方案，你可以尝试下面的方法。

此脚本在单击的链接的id和单击链接时该框应该具有的height之间存在映射。在此基础上，修改#box元素的高度。过渡也可以在fiddle中看到。

window.onload = function () {
    document.getElementsByTagName('body')[0].onclick = function(e){
        var box = document.getElementById('box');
        var heights = { first: '20px', second: '40px', third: '30px' };
        if(e.target.id)
            box.style.height = heights[e.target.id];
    };
}

Answer 2

如果您想选择当前定位的元素，只需执行: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/

Answer 3

如果您想要操纵javascript，我认为您需要使用DOM。你必须记住CSS只用于页面的样式，而不是用元素进行操作。

CSS：目标随机#keyword，用相同的div做一些事情

3 个答案:

HTML

CSS

更新

CSS