Question

我正在使用html和css构建我的网站。我已经阅读了几个教程并完成了我的研究，但现在我被困在一个区域。我使用ul和li在页面顶部创建了一个菜单，li内是链接。链接本身除了链接之外还包含更多信息。在他们之后有一个span，span会显示我在用户点击链接后显示的信息。我使用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
        <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视频来解释它目前的样子。

Answer 1

您应该查看:target伪元素。这样，您可以使用div隐藏id中的内容，然后使用＃-sign链接到此id。看看这个example。它会让jsfiddle有点混乱，但是当你在自己的页面上这样做时效果很好。

这是:target伪元素的精彩读物。 CSS-Tricks

希望这可以帮到你。

<强>更新这是一个更好的example

Answer 2

简答

我快速查看了w3schools css selector reference并注意到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>

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

<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选择器会回答您的具体问题。

如何仅使用CSS和HTML在页面上显示其他信息

2 个答案: