おしえて

CSSでdivのclassのセレクタを".ad～" としたらchromeでは表示されない？

解決済

質問者：Mr.BlueSky
質問日時：2017/11/23 00:44
回答数：1件

お世話になります。
wordpressのテーマを作成しております。
CSSファイルに、以下のように定義しました。
.adsidebox {
clear:both;
margin-top: 5px;
margin-bottom: 15px;
padding: 2px;
width:100%;
border: 1px double #DDDDDD;
box-sizing:border-box;
}
これを、htmlに、<div class="adsidebox "><img ～></div>と記載しましたら、表示したいimgはchromeでは表示されませんでした。これをfirefoxでブラウジングしましたら、ちゃんと表示されます。
そこで、上記のセレクタ.adsidebox の「ad」部分を削除して、「.sidebox 」と修正し、htmlを<div class="sidebox "><img ～></div>としてchromeで見ましたら、あら不思議、ちゃんと表示されます。

そこで、教えていただきたいのですが、chromeでは、cssのセレクタの先頭に「ad」を付けたら、無視される仕様なのでしょうか？それとも何らかのルールがあるのでしょうか？

どうぞよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2017/11/24 15:13

こんにちは

＞chromeでは、cssのセレクタの先頭に「ad」を付けたら、
＞無視される仕様なのでしょうか？
詳しいわけではありませんが、そのようなことはないと思いますよ。
むしろ、CSSの他の指定との関係で起きている事象ではないでしょうか？

試しに、簡略化した以下でも表示されないでしょうか？
二つ目のブロックの枠線やmarginが効いているなら、class="adsidebox"が認識されていると言えると思います。
（私の環境ではきちんと表示されます。 chrome 62.0）

<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>Sample</title>
<style type="text/css">
div { border:3px dotted red; margin:0; background-color:#FFD; }
div span { display:inline-block; padding:20px; }

.adsidebox {
clear:both;
margin-top: 5px;
margin-bottom: 15px;
padding: 2px;
width:100%;
border: 1px double #DDDDDD;
box-sizing:border-box;
}
</style>
</head>
<body>
<div><span>ブロック 111</span></div>
<div class="adsidebox"><span>ブロック 222</span></div>
<div><span>ブロック 333</span></div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

たいへんご丁寧にご回答くださり、ありがとうございます。
早速、書いていただいているHTMLを、chromeで見てみました。
ご指摘いただいたとおり、私の環境でも「ブロック 222」もちゃんと表示されました。

子CSSを親CSSで、
@import url(css/html5reset-1.6.1.css);
@import url(css/layout.css);
@import url(css/mycss.css);
@import url(css/nav.css);
こんな具合に段階的に読み込んでいます。
（adsideboxは、layout.cssに定義していました。）
どこかで相互干渉している可能性がわかりました。
そうですね、こうやってシンプルにして確認すればいいのだとわかりました。

本当に助かりました。ありがとうございます。

通報する

お礼日時：2017/11/24 17:09

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！