0

我正在做一个基本的高光练习，我不知道为什么它不起作用。在列表中有一项具有“已选择”类的项目，这也是主体的 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”框没有突出显示，为什么？由于 body id 被“选中”，它不应该改变吗？

4

2 回答 2

0

改变这个

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

对此

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

这将解决它。

于 2013-07-14T00:08:35.813 回答
0

随着.selected a您选择每个a元素，它是具有 class 的元素的子元素.selected。

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

#selected .pagination a.selected

但也许你不需要那么具体。也许只是在做：

a.selected

对你来说没问题。

于 2013-07-14T00:10:04.830 回答