CSSファイルを特定のIDと一致させるためのツール

Question

私のWebページにCSSファイルを含める必要がありますが、特定のdiv内でのみ一致する必要があるという問題があります。例：

通常のCSSファイル：

#main td { 
padding:20px; 
} 

追加のCSSファイル：

.myclass td { 
padding:0px; 
} 

HTML：

<div id="main"> 
    <table><tr><td>TD with padding 20px</td></tr></table> 
    <div id="inside" class="myclass"> 
     <table><tr><td>TD which should have with padding 0px, but get padding 20px; </td></tr></table> 
</div> 

これだけ簡略化した例がある - 実際に、追加のCSSファイルは非常に長く、複雑です（私はtinymceを含める必要がありますが、ここのcss定義はしたがって、 "通常の" CSSファイルでは使用できません）。

私のQ：特殊なIDでのみ動作するように追加のcssファイルを変更できるツール（おそらくPHP？）はありますか？有効な構文で

#inside .myclass td { 
    padding:0px; 
    } 

そしてもちろん出力のCSSファイル：例では、それはへの追加のCSSファイル内のすべてのエントリを変更する必要があります。

Answer 1

SASSを使用できます。それは、代わりのPHP、Rubyで書かれているが、それは簡単にあなたがネストされたルールを使用してやりたいことができます：あなたが使用することができ、特定のファイル内のすべてのセレクタをプレフィックスに

#inside .myclass td { 
    padding: 0; 
} 

：

#inside{ 
    .myclass td { 
    padding: 0; 
    } 
} 

はにコンパイルされます次の例のようにnested import：

/* File vendor.scss */ 
.myclass td { 
    padding: 0; 
} 

あなたのインポートファイル：

/* File main.scss */ 
#inside { 
    @import "vendor"; 
} 

これにより、上記の例と同じ結果が得られます。

ネストされたインポートを使用する場合、インポートしたファイルは.scssファイルである必要があります。

Answer 2

正規表現を見つけて置き換えるのが好きです。ただ、置き換え：

^[^{]+ 

で：

#inside $0 

。少なくともNotepad ++で動作します。

Answer 3

好奇心が強い、TDタグにクラスを適用しようとしましたか？または、定義を.myclassとして設定します。TABLE TR TD？