我合并了本地文档，组文档和f.a.q。我一直在整理我的文档。结果非常好，可以轻松更新和添加。顶部有一个静态导航栏，带有下拉菜单，可导航到文档的各个部分。理想情况下，我想隐藏当前链接以外的所有内容。
CSS：
<style>
/* Block Elements */
body { margin-bottom: 150px; background-color: white; }
section { margin-left: 35px; }
/* Select/Display Elements */
section:not(#welcome) { display: none; }
section:target { display: block; }
...
</style>
我也尝试过：
section:active { display: block; }
section:focus { display: block; }
我还尝试将!important添加到section:target { display: block !important; }而不成功。在一个没有附加CSS的简单页面中，我可以使其正常工作，但是我似乎无法使其与完整样式一起工作。
建议？
编辑：一个示例似乎可以正常工作，尽管它是使用div而不是部分的：
<html>
<head>
<title> Test Target Selector </title>
<style>
div { display: none; }
div:target { display: block; }
</style>
</head>
<body>
<nav>
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
</nav>
<section>
<div id="1"> <h2> 1 </h2> <p> Content 1 </p> </div>
<div id="2"> <h2> 2 </h2> <p> Content 2 </p> </div>
<div id="3"> <h2> 3 </h2> <p> Content 3 </p> </div>
</section>
</body>
</html>
Edit2：添加原始的完整CSS和框架HTML。
<html>
<head>
<style>
/* Block Elements */
body { font-family: "Antic Slab", "Source Sans Pro", Helvetica, sans-serif; margin-bottom: 150px; background-color: white; }
section { margin-left: 35px; }
/* Select/Display Elements */
section:not(#welcome) { display: none; }
section:target { display: block; }
/* Block Elements Continued */
h1 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.4em; }
h2 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.3em; }
h3 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.2em; }
h4 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.1em; }
h5 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.0em; }
p { text-align: justify; font-size: 1.0em; margin-right: 50px; }
blockquote { margin: 15px 0 0 15px; margin-right: 50px; }
blockquote p { padding-left: 15px; margin-right: 50px; }
ol, ul, dl { margin: 15px 0 0 15px; margin-right: 50px; }
li { padding: 5px; }
dt { padding: 5px; font-weight: bold; float: left; }
dd { padding: 5px; }
img { display: none; border: 1px solid black; margin: 20px; padding: 0; width: 200px; }
/* Inline Elements */
a { text-decoration: none; color: blue; }
a:hover { color: cyan; }
code { font-family: monospace; font-size: 1.1em; }
cite { color: darkgray; font-style: italic; }
cite a { color: navy; }
cite a:hover { color: cyan; }
code { font-family: monospace; font-size: 1.10em; }
blockquote.email { margin: 25px; border-left: 1px solid lightgray; }
/* Classes */
.email { border-left: 1px solid gray; }
.lower-alpha { list-style-type: lower-alpha; }
.outdated { color: red; }
.indent { margin-left: 50px; }
.center { text-align: center; }
.indent { margin-left: 25px; }
.no-wrap { white-space: nowrap; }
.outdated { text-decoration: none; font-size: 0.9em; color: lightgray; }
/* Main Navigation */
nav ul { margin: 0 2px; position: fixed; top: 0; width: 100%; list-style: none; background-color: black; padding: 0; text-align: center; }
nav ul li { position: relative; float: left; color: white; background-color: black; display: inline-block; text-align: center; margin: 0; padding: 10px; font-size: 0.90em; }
nav ul li:before { content: ""; }
nav ul li a { color: white; margin: 0; padding: 10px; text-decoration: none; -webkit-transition: color 0.2s linear, background 0.2s linear; -moz-transition: color 0.2s linear, background 0.2s linear; -o-transition: color 0.2s linear, background 0.2s linear; transition: color 0.2s linear, background 0.2s linear; }
nav ul li a:hover { color: white; }
nav ul li:hover > a { background: black; }
/* Drop-Down Navigation */
nav ul li:hover > ul { visibility: visible; opacity: 1; }
nav ul ul, nav ul ul li ul { list-style: none; margin: 0; padding: 10px; visibility: hidden; opacity: 0; position: absolute; z-index: 99999; width: 180px; background: white; -webkit-transition: opacity 0.2s linear, visibility 0.2s linear; -moz-transition: opacity 0.2s linear, visibility 0.2s linear; -o-transition: opacity 0.2s linear, visibility 0.2s linear; transition: opacity 0.2s linear, visibility 0.2s linear; }
nav ul ul { top: 43px; left: 1px; }
nav ul ul li ul { top: 0; left: 181px; }
nav ul ul li { clear: both; width: 100%; border: 0 none; border-bottom: 1px solid #c9c9c9; }
nav ul ul li a { background: none; padding: 7px 15px; color: white; text-decoration: none; display: inline-block; border: 0 none; float: left; clear: both; width: 150px; }
/* Lists */
ul { margin: 25px; list-style-type: none; }
ul li { padding: 5px; font-size: 0.90em; text-align: justify; }
ul li:before { content: "\2022"; }
ol { margin: 25px; }
ol li { padding: 5px; font-size: 0.90em; text-align: justify; }
ol li.lower-alpha { list-style-type: lower-alpha; }
/* Tables */
table { margin: 25px 25px auto; border-collapse: collapse; }
table caption { margin: 25px 0 25px 0; text-align: left; color: gray; }
th, td { padding: 5px; border: 1px solid lightgray; vertical-align: center; }
th { font-size: 0.8em; font-weight: bold; text-align: center; }
td { font-size: 0.8em; text-align: justify; white-space: nowrap; }
td:hover { background-color: lightcyan; }
</style>
</head>
<body>
<nav>
<ul id="sitemap">
<li class="h1"> <a href="#site_doc">Site Doc</a>
<ul>
<li class="h2"> <a href="#backup">Backup</a> </li>
<li class="h2"> <a href="#data">Data</a> </li>
</ul>
</li>
<li class="h1"> <a href="#notes">Notes</a>
<ul>
<li class="h2"> <a href="#manual">Manual</a> </li>
</ul>
</li>
</ul>
</nav>
<section id="welcome">
<h1> Documentation Page </h1>
<p> Welcome to the documentation page. </p>
<p> This page is under development. </p>
</section>
<section id="site_doc">
<h1> Site Doc </h1>
<section id="backup">
<h2> Backup </h2>
<p> Backup procedures. </p>
</section>
<section id="data">
<h2> Data </h2>
<p> Data storage procedures. </p>
</section>
</section>
<section id="notes">
<h1> Notes </h1>
<section id="manual">
<h2> Manual </h2>
<p> Manual. </p>
</section>
</section>
</body>
</html>
答案 0 :(得分：2)
简化示例不起作用的唯一原因是因为您将所有部分都包装在了另一个部分中。用其他东西代替那个包装纸，它将起作用。至于其他CSS的更常见问题，有两种解决方法：找出哪些规则与您的自定义CSS混淆，或者添加更具体的规则，例如CSS类到您的可切换部分。
<html>
<head>
<title> Test Target Selector </title>
<style>
section { display: none; }
section:target { display: block; }
</style>
</head>
<body>
<nav>
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
</nav>
<div>
<section id="1"> <h2> 1 </h2> <p> Content 1 </p> </section>
<section id="2"> <h2> 2 </h2> <p> Content 2 </p> </section>
<section id="3"> <h2> 3 </h2> <p> Content 3 </p> </section>
</div>
</body>
</html>