Question

我正在做一个基本的高光练习，我不知道它为什么不起作用。在列表中有一个项目具有“已选择”类，也是正文的id，在css中，这些id和类被调用以更改项目的背景。

HTML：

<body id="selected">



<ol class="pagination" >
    <li><a href="index.html" rel="prev">prev</a></li>
    <li><a href="index.html">1</a></li>
    <li><a href="index.html" class="selected">2</a></li>
    <li><a href="index.html">3</a></li>
    <li><a href="index.html">4</a></li>
    <li><a href="index.html" rel="next">next</a></li>
</ol>


</body>

CSS

    * { 
    padding:0;
    margin:0;
    list-style-type: none;
}

#selected .pagination .selected a {
    background-color: blue;
    cursor: default;
}

ol.pagination li {
    float: left;
    margin-right: 0.5em;
}

ol.pagination a, ol.pagination li.selected  {
    display:block;
    border: 1px solid #ccc;
    padding: 0.2em 0.5em;
    text-decoration: none;
}

ol.pagination a:hover, ol.pagination a:focus, ol.pagination a:active, ol.pagination li.selected {
    color:white;
    background-color:blue;
}

ol.pagination a[rel="prev"],
ol.pagination a[rel="next"] {
    border:none;
}

ol.pagination a[rel="prev"]:before {
    content: "\00AB";
    padding-right: 0.5em;
}

ol.pagination a[rel="next"]:after  {
    content: "\00BB";
    padding-left: 0.5em;
}

并且“2”框没有突出显示，为什么？身体id被“选中”不应该改变吗？。

Answer 1

更改此

#selected .pagination .selected a {
background-color: blue;
cursor: default;
}

到此

#selected .pagination .selected {
background-color: blue;
cursor: default;
}

这将解决它。

Answer 2

使用.selected a，您选择每个a元素，该元素是具有类.selected 的元素的子元素。

您的选择器看起来应该更像这样：

#selected .pagination a.selected

但也许你不需要如此具体。也许只是这样做：

a.selected

对你没问题。

CSS高亮显示不显示

2 个答案: