0

ウェブサイトのいくつかのCSSアイテムで問題が発生しています。それはすべてリストアイテムに帰着します！

<ul> <li>独自のcssファイルを使用してタグ付けするメニューバーがあり、別のcssファイルから<ol>機能するスライダーが<li>あり、独自のcssファイルを持つサイトコンテンツがありますが、それらはすべて互いに上書きして隠れているようですその他の項目！

これらすべてを分離しておく方法や、これが発生しないようにする方法について、誰かがヒントを得ましたか？

これがすべてを変えているように見えるメニューcssの例です：http： //pastebin.com/8Jd2XUUT とコアメニューcss： http： //pastebin.com/eVsRvxs5 menu html：http: //pastebin.com/ P7Qh0M8aメインサイトcss：http ://pastebin.com/kKqP0N1C

4

4 に答える 4

1

CSSの特異性、およびクラスとIDの使用方法について学びます。これらの概念は、CSSの管理に役立ちます。

したがって、HTMLには次のようなものがあります。

<ul></ul>
<ul class="foo"></ul>
<ul class="foo" id="bar"></ul>

次に、CSSで：

/* This targets all ul elements */
ul {
    font-size: 2em;
}
/* This targets only ul elements with a class of foo. It's more specific (has a higher specificity) than the above */
ul.foo {
    font-size: 3em;
    color: aqua;
}
/* The ul with a class of foo and an id of bar gets both sets of styles, but as ID has a higher specificity than class, the font size will be bigger. */
ul#bar {
    font-size: 4em;
}

編集：ああ、問題がわかりました！CSSファイルは、とのアイテム<ul class="menu">を<ul class="lblue">それぞれターゲットにしているように見えます。があります<ul class="menu lblue slide">。これは、両方のCSSファイルが同じulをターゲットにし、一方が他方をオーバーライドすることを意味します。結果は完全な混乱になります。

HTMLで2つのメニューを分離し、それに応じてターゲットを設定する必要があります。

<ul class="menu"><!-- Put the menu HTML code here --></ul>
<ul class="lblue"><!-- Put the lblue HTML code here --></ul>

また、id属性を誤解しているようです。IDはページごとに1回しか使用できず、スペースを含めることはできません。したがってid="lblue li"、まったく機能しません。今のところそれらを削除することをお勧めします！

于 2012-07-31T14:54:07.587 に答える
1

リスト ID を指定してから、ID を具体的にターゲティングします。ID は一意である必要があるため、別のリストに影響を与えることなく 1 つのリストをターゲットにすることができます。

たとえば、次の HTML を使用します。

<ol id="list1">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>
<ul id="list2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

次のCSSを使用できます

#list1 li {
    color: red;
}
#list2 li {
    color: blue;
}

各リストのリスト項目に異なる色を適用します。

于 2012-07-31T14:39:02.450 に答える
0

詳細ルールを学ぶhttp://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

これにより、id の重みとクラス、およびそれらの組み合わせについて学習できます。

また、考慮に適用される順序スタイルもあります（同じ重量で最後の勝利）

于 2012-07-31T14:41:58.210 に答える
0

一意の ID を指定してみてください

<ul id="id">
    <li>content</li>
    <li>content</li>
</ul>

#id li {
    color: xx;   also you can try color:xx!important;
}
于 2012-07-31T14:44:34.840 に答える