HTMLのhead内に記述したスタイルで、IDだけ効かずにクラスだけ効いているんですが、これってあり得ますか？
---
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
#button{
cursor:pointer;
width:200px;
height:50px;
background:#093;
}
.active{
background:#399;
}
</style>
</head>
<body>
<div id="button">button</div>
</body>
</html>
---
上記のようなHTMLがありますが、IDのスタイルだけ効きません。
ブラウザのキャッシュのクリアもしてみましたが、ダメでした。
原因わかる方いますか？
みんなの回答 13 件
インデントが全角スペースになっているから
問題ないですね。
ここに書かれてない他のソースが悪さしてるんじゃないでしょうか。
ttp://www.jquerystudy.info/sample/simple/switch.html
これを見て勉強がてらに書いてみたんですが、
$(function () {
$("#switch").click(function(){
$(this).toggleClass("active");
});
});
を入れると、クラスのスタイルは適用されますがIDの方が効かなくなりました。
上記のコードも<script></script>で囲ってheadに入れてますが、これがダメなんでしょうか。
タグと同じ名称をID属性の名称にできない。それだけ・・・
なんか色々コピペミスってますが、下記は確認済みです。
地味に高度な釣りトピだな。
あれだな、状況が意味わからんから、コピペしてブラウザで開いたら現象を再現できるソースを用意してくれ
で、何が問題だろう？
classじゃidにかかってる背景色の上書きできないから適当に分かりやすくしたけど。
Liveweave - HTML5, CSS3 & JavaScript playground for web designer...
http://liveweave.com/5Vwxj8そのまま問題部分のソース貼れや。話はそれから
何が必要な情報かを判断できないのが素人なんだから、つべこべ言わずにソース全部だせ。
とりあえず、あなたがここに載せたソースだけ新規で書いてみて、全角スペース削除。それで反映されてるか確かめてみてください。たぶん問題ないはず。
そうなるとほかが怪しい。
ちなみにこうしないとclassの背景色は反映されないはず、、
#button.active{
background:#399;
}
コードペンとかに貼ってみるべき。じゃないとわからない。
あとは、検証してないけど
とかね。
関連するトピックス