3

これは私のマークアップです:

<div id="nav">
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li>
            <a href="#">Articles</a>
            <ul class="inside-ul">
                <li><a href="#">Article 1</a></li>
                <li><a href="#">Article 2</a></li>
                <li><a href="#">Article 3</a></li>
            </ul>
        </li>
        <li><a href="#">Page 3</a></li>
    </ul>
</div>

<ul>次のように親にスタイリングを適用します。

#nav ul {
    something;
}

#nav ul li {
    something;
}

#nav ul li a {
    something;
}

そして、次のようにスタイリングを子に適用します<ul>。

.inside-ul {
    something;
}

.inside-ul li {
    something;
}

.inside-ul li a {
    something;
}

しかし、問題は、子<ul>(.inside-ul) がまったく変更されず、親からすべてを継承しているように見えることです。CSSファイルで使用!importantしてみましたが、それでも同じままです。

何が起こっているかのイメージを次に示します。

http://i47.tinypic.com/w1brkw.jpg

私は自分自身を明確に説明したことを願っています、ありがとう。

4

4 に答える 4

3

変化する

#nav ul {
    something;
}

に

#nav > ul {
    something;
}

そうすれば、CSS は #nav の子 UL にのみ適用され、サブ UL には適用されません。

于 2010-01-06T21:34:59.963 に答える
3

これを変える：

.inside-ul {
    something;
}

.inside-ul li {
    something;
}

.inside-ul li a {
    something;
}

これに：

#nav ul.inside-ul {
    something;
}

#nav ul.inside-ul li {
    something;
}

#nav ul.inside-ul li a {
    something;
}

より具体的なルール (この場合、ID (#nav) に適用されるルールは、単純なルールよりも優先されます。

于 2010-01-06T21:37:27.137 に答える
1

これはCSS 固有の問題です。

Id の値は 100 ですが、クラスの値は 10 で、各要素名の値は 1 です。

そう#nav ul= 101 ながら.inside_ul= 10

2 つのセレクターが同じ要素に適用される場合は、特異性の高い方が優先されます。

したがって、#nav ul スタイルが優先されます。使用する必要があります

#nav ul.inside_ul

特異度は111です。

于 2010-01-06T22:00:34.750 に答える
0

最も重要なものが最後に来ていることを確認しましたか? は、CSS ファイルの の.inside-ul後に来る必要があります。#nav ul

于 2010-01-06T21:35:36.547 に答える