-1

<li>ページ内のタグの .js ファイルで定義された css スタイルがあります。既存のcssおよびjsファイルとページのレイアウトを変更せずに、htmlページを変更しようとしています。次のコードを挿入したい：

<div style="float: left; width: 18%; bottom: 6.4%; border-right-style: groove; border-right-width:2px; border-top-style: groove; border-top-width:2px; border-bottom-style: groove; border-bottom-width: 2px; padding-right: 0%; padding-top: 0%; margin-right: 0%; margin-top: 0%; position: fixed;">
    <ul class="MenuBarVertical">
        <li>Text 1</li>
        <li>Text 2</li>
    </ul>
</div>

ただし<li>、html ページ内のすべてのタグは、既存の css ファイルからスタイルを自動的に選択します。<li>一部のタグではこれを使用したくありません。<li>タグ用に別の CSS が必要です。<li>これらのタグをタグの下に囲み<div>、クラスを div タグに追加して、すべての<li>タグの既存の css をオーバーライドできる特定の css を定義することは可能ですか? <li>のようにタグでスタイルを定義することにより、既存の css をオーバーライドできます<li style="...">。正常に動作しますが、すべての<li>タグにスタイルを追加する必要があります。親タグに id または class を追加し、ページ自体のどこかに css を記述して、.css ファイルの既存のスタイルをオーバーライドするかどうかを知りたいです。コードは何になりますか？セクションでそのようなcssを宣言する方法は? または、本文で宣言する必要がありますか？

私の問題を説明できることを願っています。タグの CSS スタイルをオーバーライドする方法を知りたいです。

4

2 に答える 2

2

古いルールをオーバーライドするには、次のように要素をできるだけ具体的に定義する必要があります。

div ul.MenuBarVertical li {...}

id を div または ul 要素に配置できる場合 (ページにそのような要素が 1 つある場合) はさらに良いでしょう。他に何も機能しない場合は、!importantパラメーターを使用できますが、強くお勧めしません。

于 2013-06-04T14:35:23.333 に答える
1

考えられる解決策はいくつかあります。

1) クラスを使用して、必要なプロパティを定義します。例えば

<ul class="MenuBarVertical">
    <li class="other">Text 1</li>
    <li class="other">Text 2</li>
</ul>

次に、それらの s で使用するスタイルを宣言しますli。それに応じてcssファイルで宣言するか、このクラスのルールブロックをjavascriptで挿入するには、その場でスタイルブロックを作成してヘッドに追加するか、既存のものを使用してこのルールを追加します。

2) インライン スタイル ブロックを含めます。

<ul class="MenuBarVertical">
<style scoped>
   .MenuBarVertical li{
       /*declarations here*/
   }
</style>
    <li>Text 1</li>
    <li>Text 2</li>
</ul>

scoped 属性はかなり新しく、firefox と chrome 以外のブラウザーでは認識されません。そのため、スタイルを設定したい s をさらに指定する部分を追加し(詳細.MenuBarVertical度を上げます)、引き続き機能します。すべてのブラウザで認識されたら、これを削除して.liscopedli{...}

しないでください:

a）インラインスタイルを使用する -悪い、常にこれを避けるようにしてください！

b) 使用!important-さらに悪いことに、これも行わないでください。

于 2013-06-04T14:37:09.150 に答える