0

ツリー構造が次のようになるリスト項目内に div を合わせようとしています。

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

このリストは複数のリストになり、互いにいくつかのレベルが下がるため、ul の中に ul があります。問題は、myclass div のリンク スタイルの内容が css によって取得されず、むしろ "li a" スタイルが取得されていることです。2 つのリンクと画像をまとめないようにするにはどうすればよいですか? それらをクラスに入れることは機能していないようです。

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の内部のスタイリングを取得しないようにするにはどうすればよいですか。

4

2 に答える 2

1

あなたが抱えている問題の唯一の原因ではないかもしれませんが (あなたが求めている最終的な影響についてはわかりません)、CSS ルールの両方が正しくありません。最初：

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

「a#mylink」は、「mylink」の ID を持つ「a」タグに一致します。ドキュメントにそのようなタグはありません。<div class="myclass"> のすぐ下にある「a」を意味するだけかもしれません。

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

2 番目のルール:

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

「>」文字は、「クラス「myClass」を持つ要素のすぐ下にある img」を意味します。ただし、HTML には 2 つの間に「A」タグがあります。これを次のように変更してみてください。

.myclass > a > img{
    width: 10px;
    height: 10px;
    display: block;
    float: right;
}
于 2013-07-12T14:29:26.637 に答える