CSS スタイルを子要素の子要素に継承させたくない

スタイルシートについてまだ初心者なため質問させてください。

以下のようにテーブルのボーダーのスタイルを子要素（<table><td>）にスタイルを継承（？）させているのですが、この方法だと子要素の子要素（<table><td><table><td>）に対しても継承されてしまいます。

table.border { border-style:solid; border-width: 1px 1px 1px 1px; border-collapse: collapse; }
table.border td { border-style:solid; border-width: 1px 1px 1px 1px; }

table.border > td {…}　という指定の方法もあるようですが、こちらは対応しているブラウザが乏しいようで事実上使用できません。

子要素の子要素に対して以下のクラスを指定しても継承が優先されるためか反映されませんでした。

table.none{border-style:none;}
table.none td{border-style:none;}

HTMLタグに直接以下のように指定しても同様でした。

<table style="border-style:solid;">

どこかのサイトでは継承をリセットする必要があるような事が書いてあったような気がします。

もちろん継承を利用せず<table>および<td>個々にクラスを指定すれば（不必要なタグには指定しなければ）可能だと思いますが、これだと大きなテーブルの場合に非効率で悩んでいます。

どのようにすれば子要素の子要素にスタイルを継承させないようにできるでしょうか？

No.2 ベストアンサー 回答者： yambejp 回答日時： 2007/11/27 17:48

微妙に把握してませんがこう？

table.border table.none td {
border:0px none;
}

「css 優先順位」などで検索するといろいろヒットしますよ

この回答へのお礼

以下のコードで上手く行きました！
ありがとうございます！
クラスにクラスを重ねて指定できるんですね。
勉強になりました。

＞「css 優先順位」などで検索するといろいろヒットしますよ
ありがとうございます。
いろいろ調べてみます。

<style>

table.border table.none td { border:0px none; }

table.border{ border-collapse: collapse; }
table.border td{ border:1px solid; }

</style>

<table class="border">
<tr>
<td>
TEST
</td>
<td>
<!-- 子要素1 -->
<table>
<tr>
<td>
A1
</td>
<td>
B1
</td>
<td>
C1
</td>
</tr>
</table>
</td>
<td>
<!-- 子要素2 -->
<table class="none">
<tr>
<td>
A2
</td>
<td>
B2
</td>
<td>
C2
</td>
</tr>
</table>
</td>
</tr>
</table>

お礼日時：2007/11/27 20:32

No.3 回答者： goldfox 回答日時： 2007/11/27 19:18

table.none td {

border:none;
}
を
table.border td{
border:1px solid;
}
より「後に（下に）」書けばいいのでは。

この回答へのお礼

ありがとうございます！
以下のコードで動作しました！
このコードでは「table.none td」を「table.border」の前にもってくるだけで動作しなくなってしまいます。

先に書くか後に書くかで動作が変わるとは思いませんでした…。
勉強になります。

<style>

table.border{ border-collapse: collapse; }
table.border td{ border:1px solid; }

table.none td { border:0px none; }

</style>

<table class="border">
<tr>
<td>
TEST
</td>
<td>
<!-- 子要素1 -->
<table>
<tr>
<td>
A1
</td>
<td>
B1
</td>
<td>
C1
</td>
</tr>
</table>
</td>
<td>
<!-- 子要素2 -->
<table class="none">
<tr>
<td>
A2
</td>
<td>
B2
</td>
<td>
C2
</td>
</tr>
</table>
</td>
</tr>
</table>

お礼日時：2007/11/27 20:36

No.1 回答者： yambejp 回答日時： 2007/11/27 13:37

たとえばこんな風で？

<style>
table.border td table td{
border:0px solid;
}
table.border{
border-collapse: collapse;
}
table.border td{
border:1px solid;
}
</style>

<table class="border">
<tr>
<td>
<table>
<tr>
<td>
test
</td>
</tr>
</table>
</td>
</tr>
</table>

この回答への補足

説明がわかりづらく申し訳ありません。
ソースまでご用意いただきありがとうございます。
はじめからHTMLソースを示せばよかったです。

以下のコードで<table class="none">がうまくいかないので困っています。これを成功させるのはどのように指定すればよいのでしょうか。

<style>
table.none td {
border:0px none;
}
//table.border td table td{
//border:0px none;
//}
table.border{
border-collapse: collapse;
}
table.border td{
border:1px solid;
}
</style>

<table class="border">
<tr>
<td>
TEST
</td>
<td>
<!-- 子要素1 -->
<table>
<tr>
<td>
A1
</td>
<td>
B1
</td>
<td>
C1
</td>
</tr>
</table>
</td>
<td>
<!-- 子要素2 -->
<table class="none">
<tr>
<td>
A2
</td>
<td>
B2
</td>
<td>
C2
</td>
</tr>
</table>
</td>
</tr>
</table>

教えていただいた「table.border td table td」で目的は果たせるのですが、「table.border td table td」の時もあれば、「table.border td table td table td」の時もあるので目的の子要素の階層を動的に指定したいと考えています。
また、同じ階層の子要素でもそのまま継承したいものとそうではないものがあります。

そもそも親要素が優先されるというのがスタイルシートの構造として疑問なのですが、そういうものなのでしょうか…。

補足日時：2007/11/27 17:06

この回答へのお礼

問題は無事解決する事ができました。
ソースまでご用意いただきありがとうございました。
また、最初に回答を書き込んでいただきありがとうございました。

お礼日時：2007/11/27 20:39