こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSの@importから一部のスタイルが読み込めない・・・。

CSS外部ファイルから、一部のスタイルだけが適応されず困っています。
以下のスタイルをテーブルに適応させたいのです。

【スタイル(index.css)】
table.test{
background-color: #ffcc66;
}
table.test td{
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #000000;
}

【以下のタグに適応】
<table cellspacing="0" cellpadding="0" class="test">
<tr>
<td>AAA</td>
</tr>
<tr>
<td>BBB</td>
</tr>
<tr>
<td>CCC</td>
</tr>
</table>

【スタイル入力先】index.css
【読み込み方式】<link>によるbase.cssからの@import
<link rel="stylesheet" type="text/css" href="css/base.css">
更に、base.cssから@importでindex.cssを読み込んでいる環境です。
【OS】windowsXP
【ブラウザ】IE6

********************

適応されるとテーブルの背景がオレンジ色になり、
テーブルの「AAA」「BBB」「CCC」に点線のアンダーラインが表示されます。
しかし、テーブルの背景はオレンジになるのですが、table.test td{}のスタイルだけ適応されません…。
他のindex.css内にあるタグは正常に読み込まれ適応されています。
(※ちなみに拡張子はPHPです。HTMLではありません)
色々試すと以下の事が判明しました。

□直接タグにスタイルを入力すると全て適応される
□<head></head>内にスタイルを入力し、Class指定しても全て適応される
□試しに、base.cssに入力するとスタイルが正常に全て適応される
■しかし、index.cssにスタイル入力するとtable.test td{}のみ適応されない

なぜ外部CSSファイル(@importからのCSSファイル)から適応されないのでしょうか?
PHPなのが原因だったりもするのでしょうか…。
ご助力お願いします。

投稿日時 - 2006-11-14 21:52:52

QNo.2539622

すぐに回答ほしいです

質問者が選んだベストアンサー

phpが原因という事はないかと思います。

index.css以外の場所にtdに対するborderの指定があったりすると「詳細度」の関係でindex.cssでの指定が上書きされる可能性があります。

原因を特定せずに試すのも問題ありそうですが
index.cssの記述を次のように書き換えて試してみるのもいいかもしれません。
table.test td{
border-bottom-width: 1px !important;
border-bottom-style: dashed !important;
border-bottom-color: #000000 !important;
}

http://anslasax.net/css-make/cascade.html

投稿日時 - 2006-11-14 23:14:57

補足

ご回答ありがとうございます。

index.cssはbase.cssから@importしています。
base.cssをチェックしたところ「table.box td{border-width: 0px;}」がありました。
これを削除したところ、なんと適応されました^^;

最後に質問ですが、base.cssのtable.box td{border-width: 0px;}を消さずに
「!important;」をindex.cssのtable.test td{}に追加しましたが優先されません。
なぜでしょうか・・・。

投稿日時 - 2006-11-15 01:57:21

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

table.box と table.test の関係がわからないのでなんとも…
質問のサンプルコードにあわせてtable.testとしましたが実際はtable.boxだったという事でしょうか?

table.test td{ ← 実際はtable.box??
border-bottom-width: 1px !important;
border-bottom-style: dashed !important;
border-bottom-color: #000000 !important;
}

投稿日時 - 2006-11-15 08:56:10

補足

言葉が足りず申し訳ないです。

table.box(base.css内)とtable.test(index.css内)は
まったく違うテーブルに対してのスタイルになります。

table.test td{
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #000000;
}
↑のタグが適応されない原因がbase.cssにある

table.box td {
border-width: 0px;
}

↑のborder-width:0px;で表示されなかったようです。
border-width: 0px; を削除するとtable.index td{}のスタイルが適応されます。

やはり優先順位等の問題なのでしょうか?
ちなみに「!important;」をtable.index td{}につけても優先されません…。

投稿日時 - 2006-11-15 16:20:30

お礼

記載ミスです。

× table.index td {}
○ table.test td {}

投稿日時 - 2006-11-15 16:52:10

あなたにオススメの質問