CSS高亮不顯示

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 個解決方案

解決方案1
0 2013-07-14 00:08:35

解決方案2
0 2013-07-14 00:10:04

CSS高亮不顯示

問題描述

2 個解決方案

解決方案1 0 2013-07-14 00:08:35

解決方案2 0 2013-07-14 00:10:04

解決方案1
0 2013-07-14 00:08:35

解決方案2
0 2013-07-14 00:10:04