0

css スタイルシートに問題があります。css スタイルの継承と特異性に絞り込みました。

現在（簡略化されています）<body>、次のような HTML があります。

<div id="page-wrap">
    <div class="unilogin-wrap">
        <h1 class="unilogin-h1">Hello world!</h1>
    </div>
</div>

現在、これは複数の Web サイトで使用する必要がある uni-login フォームの一部であるため、特定の unilogin スタイル用の個別のスタイルシートがあります。ただし、Web サイトのスタイルシート (style.css) では、次のように設定されています。

#page-wrap h1{
    font-size:18px;
    margin-bottom: 18px;
    margin-left:15px;
}

また、unilogin スタイルシート (unilogin.css) では、次のように設定されています。

.unilogin-wrap h1.unilogin-h1 {
    padding:0;
    margin:0;
    font-size:18px;
    color:#596168;
    text-shadow: 1px 1px 0px #fff;
}

ただし、これは style.css から継承された h1 スタイルをオーバーライドしません。代わりに置く#page-wrap h1.unilogin-h1{}と、うまく機能します。ただし、これはオプションではありません。変更できないスタイルシートがすべて異なる複数の Web サイトで動作する必要があるためです。

インラインhtmlスタイリングを使用せずに、2番目のスタイルシートで継承されたh1スタイルの特異性をオーバーライドする方法はありますか? (style="" html 属性の方が特異性が高いことはわかっていますが、スタイルをスタイルシートに保持することを好みます)。

ありがとう...

4

2 に答える 2

1

変更してみてください.unilogin-wrap h1.unilogin-h1 {

に

#unilogin-wrap h1.unilogin-h1 {

何度も.unilogin-wrap行動するので<whatever class="unilogin-wrap"#unilogin-wrap<whatever id="unilogin-wrap"

于 2011-07-10T11:54:19.670 に答える
0

より構造的な解決策: #page-wrap にもクラスを与える

<div id='page-wrap' class='page_wrap'>

次に、一般的なスタイルを設定するときにクラスを参照します。(絶対配置と個別の非表示/表示にのみ id を使用)

他のアプローチは !important を使用しています

 margin:0 !important;

明らかに、これだけに頼ると簡単に汚染され、維持するのは悪夢になりますが、特別な場合にはそれが必要になる場合があります.

于 2011-07-10T11:48:30.537 に答える