スタイル名が重複しているため、div から CSS スタイルをクリアするグローバルな方法はありますか? コンテンツをマージしており、複数のスタイル シートを利用して作業を最小限に抑えようとしています。これが私が取り組んできたテストです: http://jsfiddle.net/Codewalker/yU2sW/7/。ただし、JSFiddle なので、2 つの外部スタイルシートを参照する代わりに、CSS ウィンドウでそれらを結合しました。secondary_container div が他のコンテナーから青色のテキストを継承する方法に注目してください。以下のコードも貼り付けました。
<div class="container">
<h1>This is in an h1 tag.</h1>
<p>This is at the very top, outside the secondary_container stuff. All kinds of content can go down here. All of this is within a paragraph tag. I'll write one more sentence then copy all this over again. Sound good? Wait that's two more sentences. Actually four. Oh well. So much for that. Here goes a little copying and pasting. All kinds of content can go down here. All of this is within a paragraph tag. I'll write one more sentence then copy all this over again. Sound good? Wait that's two more sentences. Actually four. Oh well. So much for that. Here goes a little copying and pasting.</p>
<div id="secondary_container">
<div class="container">
<p>This is within the container div that's within the secondery_container div. All kinds of content can go down here. All of this is within a paragraph tag. I'll write one more sentence then copy all this over again. Sound good? Wait that's two more sentences. Actually four. Oh well. So much for that. Here goes a little copying and pasting. All kinds of content can go down here. All of this is within a paragraph tag. I'll write one more sentence then copy all this over again. Sound good? Wait that's two more sentences. Actually four. Oh well. So much for that. Here goes a little copying and pasting.</p>
</div>
</div>
</div>
これは CSS で、実際には 2 つの別個の外部スタイルシートになります。
/* BEGINNING OF FIRST CSS FILE styler.css */
.container {
background-color: #00FF00;
height: auto;
width:960px;
margin: 0 auto;
line-height: 20px;
}
h1 { font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #F00; text-transform:uppercase; }
p { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#00F;
}
/* BEGINNING OF SECOND CSS FILE secondary_container.css
*/
#secondary_container .container h1 { font-family:Georgia, "Times New Roman", Times, serif; color: #0F0; }
#secondary_container .container p { font-style:italic; line-height:14px;}