1

我只使用 html 和 css 构建我的网站。我已经阅读了几个教程并进行了研究，但现在我陷入了一个领域。我在我的页面顶部创建了一个菜单，使用链接和ul链接。链接本身包含更多信息，而不仅仅是链接。在他们之后，我将在用户单击链接后显示显示信息。我用于在页面上显示的信息。所以结构是： lilispanspana:focus

<ul>
    <li><a href="#" tabindex="1">RESUME
        <span class="resume">
            blah blah blah
        </span></a>
    </li>
    <li><a href="#" tabindex="1">My artwork
        <span class="artwork_area">
            blah blah blah
        </span></a>
    </li>
</ul>

虽然简历部分可以很好地与 一起使用a:focus，并且只有在用户单击它之后才能将其显示在页面上，但它不会与“我的作品”一起使用，因为我需要在该部分中有更多链接。我知道不允许将链接嵌套在其他链接中，那么我怎样才能让代码看起来像这样呢？ 

<ul>
    <li><a href="#" tabindex="1">RESUME
        <span class="resume">blah blah blah</span>
        </a>
    </li>
    <li><a href="#" tabindex="1">My artwork</a><!--notice how the link ends here-->
        <span class="artwork_area">
            <p>blah blah blah
            <a href="assets/images/image1.jpg"><img src="assets/images/large_image1.jpg"/>Pic1</a>
            <a href="assets/images/image2.jpg" ><img src="assets/images/large_image1.jpg"/>Pic2</a>
            </p>
        </span>
    </li>
</ul>

这就是我卡住的地方。我无法弄清楚如何在span不将其嵌套在链接中的情况下使该部分出现，但是在其中嵌套另一个链接是不可接受的。我只是在阅读和练习 html 和 css 大约 3 周，所以我还没有那么精明。我真的很想只用 html 和 css 来做我的网站，因为我认为它更方便并且加载速度更快。我制作了一个简短的youtube视频来解释它目前的外观。

4

2 回答 2

2

您应该查看:target伪元素。这样，您可以div使用 an隐藏内容，然后使用 # 符号id链接到此内容。id看看这个例子。它使 jsfiddle 有点混乱，但是当您在自己的页面上执行此操作时效果很好。

:target这是关于伪元素的好读物。CSS 技巧

希望这可以帮到你。

更新 这是一个更好的例子

于 2012-06-26T20:10:19.957 回答
1

简答

我快速浏览了w3schools css 选择器参考，并通过示例记录了element+element选择器：

div+p -> Selects all <p> elements that are placed immediately after <div> elements

所以我尝试了以下样式，它适用于您的第二个示例

a:focus+span {
   display:block;
}

其余的

我已经对您的 CSS 的外观做出了假设 - 也许您可以编辑您的问题以显示这一点，以便您的示例完整。

但是根据您为这两种情况提供的以下 html 示例。

<style>
li>span {
    display:none;
}

li>a:focus span {
    display:block;
}

li>a:focus+span {
    display:block;
}
</style>

考虑一下，如果您要使事情保持一致，以便您永远不会嵌套span在操作链接内部，您可以删除a:focus span选择器。您的简历列表项将变为：

<li>
    <a href="#" tabindex="1">RESUME</a>
    <span class="resume">blah blah blah</span>
</li>

此外，如果您还没有这样做，您可能希望为菜单系统的列表项元素提供一个通用类，例如menu-item，以便进一步限制 css。这里的目的是始终显示最后一个列表项Outside。

<style>
li.menu-item>span {
    display:none;
}

li.menu-item>a:focus+span {
    display:block;
}
</style>

...

<ul>
    <li class="menu-item">
        ... Resume 
    </li>
    <li class="menu-item">
        ... My artwork
    </li>
</ul>

<ul>
    <li>
        <a href="#" tabindex="1">Outside</a>
        <span class="resume">outside stuff which is always shown</span>
    </li>
</ul>

最后一件事；我注意到单击其中一个图像操作链接会破坏整个过程，因为主要操作链接再次被隐藏。据我所知，没有parent-from-child选择器，所以在这个阶段我不确定这对你有什么作用。无论如何，我认为element+element选择器回答了您的具体问题。

于 2012-06-27T05:44:30.953 回答