cssが読み込まれない

質問

htmlを作成しています。（html5）
が、cssが読み込まれなくて困っています。

例えば下記のような場合、
*****************
<div id="syu">
<table>
<tr>
<td class="code1">コード
　　　<input type="text" class="style1">
</td>
<td class="style2">
<input type="text" value="abc" class="style3">
</td>
</tr>
(続く)
*******************

cssファイルに設定する場合、下記の書き方はどちらも間違っていて、効かないのですが
どういう風にかけばいいのか、思い悩んでいます。
(1) #syu .code1{・・・}
(2) #syu table td.code1{・・・}
正しくはどういうふうに書くのが正解なのでしょうか？

すみません、自分で調べろ、いろいろ試してみろと言われそうですが、
最初はうまくcss読み込まれていたのですが、途中で事情があって、htmlの一部をiframeに持っていったら、残されたほう（上記）のcssが効かなくなってしまったのです。
これを元にプログラミングしなければならず、緊急なのでヘルプをお願いしたいです。
よろしくお願いします。

回答No.1

4017B · ベストアンサー

CSSの記述方法に正解ってのは無いですね。その時々に応じて最適な記述式で柔軟に対応させるのがCSSの仕様ですから。ただ一般的には記述量を減らす意味合いで、(1)の様に簡略化して書く事の方が多いです。

＞iframeに効かない
それが正しいCSSの仕様です。この場合は親HTMLにしかCSSは適用されず、iframe内の子ページ(子HTML)には別途個別にそのHTML内でまたCSSを記述して置くのがCSSの仕様です。

どうあっても親HTMLの方からiframe内の子ページへCSSを適用させなければならないのであれば。標準手法では無理で、何らかのスクリプト処理～この場合はJavascript(jQuery)を使うしか方法は無いです。

P.S.
HTML自体の編集が許される環境であれば、該当部分のHTMLタグ内に直に、

<td style="color:#f00;">

～みたいに記述すれば基本的にはどんな場合でもCSSを強制適用可能です(外部CSSに記述する際の "!important" と同じ意味になる)。

ただしこれは最後の手段、これを記述してしまうと後からCSSに変更を加えても一切無視されて、常にHTMLタグ内に記述されたスタイルの方が最優先されてしまうので。

お礼

4017Bさん、ありがとうございます。
書き方が悪かったです。
iframeのほうには必要なcssを別の外部ファイルにしてLINKしてあります。
効かなくなったのは、もともとの親のほうなんです。
（iframe内はちゃんとcssが効いています)

例えばF12のコンソールで　クラス名のcode1の要素の検査をクリックすると、それを定義している箇所が表示されますよね？cssファイル名もわかるように。
でも、それが何故か表示されず、*{・・・}など全体的なところしか表示されないんです。
読み込んでないって事ですよね？

今日は仕方が無いので、外部ファイルにしないでタグに直接style=""で指定します。（画面イメージを今日中に出さないと！）もともとそうしていたのを大変なので今回、cssファイルにもっていったんです。

クラス名を任意でつけてcssを定義すればよかったんでしょうか？
今回は他で、table {} や　tbaleにIDを付けて　#aaa td{}などのように定義したりしてしまいました。element名での定義は影響の範囲が広くて難しいですね。