Question

是否可以使用纯CSS在单个页面上突出显示锚链接？

当有人在指定页面时，我已经看到很多关于链接突出显示的教程。但我从来没有看到有人按我的要求行事......只能使用javascript。但我不想使用js，因为这是一个我想做的花哨的noscript页面。

＆＃13;

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

＆＃13;

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

Answer 1

只能使用: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>

是否可以使用纯CSS在单页网站上突出显示锚链接？

1 个答案: