是否可以使用纯CSS在单个页面上突出显示锚链接?
当有人在指定页面时,我已经看到很多关于链接突出显示的教程。但我从来没有看到有人按我的要求行事......只能使用javascript。但我不想使用js,因为这是一个我想做的花哨的noscript页面。
ul {
margin: auto;
word-wrap:break-word;
padding:0px;
position:fixed;
}
a {
width:30px;
}
a:link, a:visited {
text-decoration:none;
display:block;
background-color:gray;
color:#ffffff;
}
a:hover, a:active {
background-color:black;
}
.contentWrap {
top:0px;
width:300px;
bottom:0;
background-color:#FF9933;
position: absolute;
margin:auto;
left: 0;
right: 0;
}
.container {
height:1000px;
}
#one {
background-color:orange;
}
#two {
background-color:green;
}

<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
</ul>
<!-Content/->
<div class='contentWrap'>
<div class='container' id='one'></div>
<div class='container' id='two'></div>
</div>
<!-Content/->
&#13;
答案 0 :(得分:0)
只能使用:target
pseudo-class和普通sibling selector的css。但是,链接必须在容器和容器不能在另一个元素之后。
对于html,您需要移除.contentWrap
div并在<ul>
div之后移动.container
。
<div class='container' id='one'></div>
<div class='container' id='two'></div>
<ul>
<li><a href='#one'>One</a></li>
<li><a href='#two'>Two</a></li>
</ul>
对于css,您需要更改ul
和.container
规则。在新规则的选择器中,:target
选择具有片段标识符链接到的id
的容器。然后~
选择以下ul
,其后代a
具有相应的href
属性。
ul {
margin: auto;
word-wrap:break-word;
padding:0px;
position:fixed;
top: 0;
left: 0;
}
.container {
height:1000px;
width:300px;
margin: auto;
}
#one:target ~ ul [href='#one'],
#two:target ~ ul [href='#two'] {
background: #ccc;
}
ul {
margin: auto;
word-wrap:break-word;
padding:0px;
position:fixed;
top: 0;
left: 0;
}
a {
width:30px;
}
a:link, a:visited {
text-decoration:none;
display:block;
background-color:gray;
color:#ffffff;
}
a:hover, a:active {
background-color:black;
}
.container {
height:1000px;
width:300px;
margin: auto;
}
#one {
background-color:orange;
}
#two {
background-color:green;
}
#one:target ~ ul [href='#one'],
#two:target ~ ul [href='#two'] {
background: #ccc;
}
<div class='container' id='one'></div>
<div class='container' id='two'></div>
<ul>
<li><a href='#one'>One</a></li>
<li><a href='#two'>Two</a></li>
</ul>