-1

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

假设链接一个有 href="#first"。并且链接两个有 href="#second"。那么用 div 做某事的 CSS 会是什么？（带身份证）

我尝试了很多事情，例如：

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

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

这会通过悬停#linkOne 来更改#box 的大小

4

3 回答 3

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;
}

演示小提琴

编辑：我知道您没有标记 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];
    };
}
于 2013-09-24T14:17:31.277 回答
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/

更新

从您的评论来看，您似乎想要使用不同的当前目标来操作同一个框，这不会是直截了当的，但是如果您将s与 ID嵌套<div>然后您的原始 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/

于 2013-09-24T14:18:22.220 回答
0

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

于 2013-09-24T14:09:14.557 回答