html - スタイルシートの外側の div 内で内側の div を 1 行で呼び出すことはできますか?

Question

私はワードプレスを使用しており、スタイルを設定したい要素があります...それは...

<h2 class="widgettitle">

今、私は私ができることを知っています、

h2.wigettitle {
whatever:css;
}

ただし、私が抱えている問題は、同じタイトルのウィジェットが複数あり、それらすべてに影響することです。

ただし、この h2.widget のタイトルは「headerarea」という別の div 内にあります。

だから、私のファイルでは...

<div id=headerarea">
    <h2 class="widgettitle">
               whatever title
    </h2>
</div>

この特定の要素に #headerarea.h2.widgettitle などの要素を実行させることは可能ですか?

外側の div を個別にスタイリングしようとしましたが、内側の div はまだ別の場所からスタイリングを取得しているため、それらすべてをオーバーライドする必要があります。

これが理にかなっていることを願っています...助けてくれてありがとう。

Answer 1

を使用し#headerarea h2.widgettitleます。スペースを入れるということは、子どもたちを見つめることを意味します。a を含めると、>これは直接の子のみを検索することを意味します。オーバーライドが機能しない場合!importantは、最後に追加して、適用されている他のスタイルをオーバーライドするようにしてください。

Answer 2

これを行うには、子セレクターまたは子孫セレクターを使用できます。子セレクター> #headerarea > h2.widgettitleは、id ヘッダーエリアを持つ要素の子であるクラス widgettitle を持つ h2 要素を選択します。子孫セレクタ a スペース#headerarea h2.widgettitleは、id headerarea を持つ要素の子孫であるクラス widgettitle を持つ h2 要素を選択します。

http://www.w3.org/TR/css3-selectors/#selectorsも参照してください。

Answer 3

#headerarea .widgettitle {
    /* Put your styles here */
}