列表項中的Div（ul li）不斷破壞樣式

Question

我正在嘗試將div放入樹形結構如下所示的列表項中：

<ul>
<li>
<div class="myclass">
<a href="#">
<img />
</a>
</div>
<a href="#">
<img /> </a>
</li>
</ul>

這個列表變成了彼此內部的幾個列表，每個層次都下降了幾層，所以您在ul里面有ul。 問題是myclass div鏈接樣式的內容不是由CSS而是由“ li a”樣式獲取的。 我如何強制它不要將兩個鏈接和圖像放在一起？ 將它們放在課堂上似乎沒有用。

這是CSS：

.myclass > a#mylink {
    width: 20px;
    height: 20px;
    display: block;
    float: right;

}

.myclass > img{
    width: 10px;
    height: 10px;
    display: block;
    float: right;
}

不斷被以下對象覆蓋：

ul > li ul li a {
height: 20px;
display: block;
line-height: 20px;
vertical-align: middle;
float: left;
color: #444;
font-size: 1.1em;
}

ul > li ul li img {
width: 20px;
height: 20px;
display: block;
float: left;
padding-right: 10px;
}

要澄清的問題基本上是，我如何保持div內容的樣式有效，而不使用li內部的樣式。

Answer 1

它可能不是您遇到問題的唯一來源（我不確定您所追求的最終效果），但是兩個CSS規則都不正確。 首先：

.myclass > a#mylink {
    width: 20px;
    height: 20px;
    display: block;
    float: right;
}

'a＃mylink'與ID為'mylink'的'a'標簽匹配。 您的文檔中不存在此類標簽。 您可能只是說<div class =“ myclass”>下的'a'：

.myclass > a {
    width: 20px;
    height: 20px;
    display: block;
    float: right;
}

第二條規則：

.myclass > img{
    width: 10px;
    height: 10px;
    display: block;
    float: right;
}

'>'字符表示“在類'myClass'的元素正下方的img”。 但是，您的HTML在兩者之間有一個'A'標簽。 嘗試將其更改為：

.myclass > a > img{
    width: 10px;
    height: 10px;
    display: block;
    float: right;
}

Answer 2

[編輯-以下內容回答了原始問題，而不是編輯后的版本。 我將其留在這里，因為我認為它通常仍可以為該主題增加一些價值]

如果需要，您的CSS可以比“ li a”更具體。 例如，您可能具有以下結構：

<ul class="top">
    <li>
        <a> ... </a>
        <ul>
            <li>
                <a> ... </a>

如您所注意到的，以下CSS將應用於所有'a'標簽：

li a { }

但是，這一條款僅適用於緊隨UL之下的企業：

ul.top > li > a {  }

我建議閱讀CSS中可用的選擇模式； 有各種各樣的內容，一個StackOverflow答案只能涉及。