私はしばしば次の問題を提示されます。
次のようなマークアップがあります。
<body>
<div id="wrapper">
<div id="header"><a href="/">home</a>
</div>
<div id="left-column">
<ul>
<li><a href="/1">one</a></li>
<li><a href="/2">two</a></li>
</ul>
</div>
<div id="main-content">
<p><a href="#">some link</a> lorem ipsum</p>
</div>
</div>
</body>
これを大規模に想像してみてください。さまざまなナビゲーション項目、段落、および一般的な高度なものが含まれています。
私は OOCSS と Modular CSS の原則に従い、場所に基づくスタイリングを避けようとしていますが、多くの場合、CMS はどこにでもクラスを追加できるほど柔軟ではありません。
したがって、メインコンテンツのすべてのリンクに境界線を付けてスタイルを設定するには、次のようにします。
a {border:1px solid #000;}
しかし、どういうわけか私のすべてのリンクはleft-column最終的に境界線で終わります. 次に、行って上書きする必要があります。
#left-column a {border:0;}
そして、これが混沌の始まりです。変更を行うたびaに、リセット スタイルをすべての「例外」に追加する必要があります。
それから私は試みます
#main-content a {border....}
しかし、それはさらに悪いことです。なんで？id は強力なセレクターであり、通常は境界線が適用されない #main-content 内のリンクを上書きするためです。
リセットせずに効率的なリンクのスタイリングを行うための提案はありますか? CSS「スコープ」がまだリリース候補モジュールではない場合、この問題を解決するために CSS がネイティブに提供するツールはどれですか? たとえば、ルールの出現順序は役に立ちますか?