私の解釈としては
ID ＝ 100点
class ＝10点
タグ ＝1点
とし、加点し最も点数が高いスタイルが適用される。
もしポイントが同点ならば下に記述されている方が優先される。
と解釈してました。
下記のＣＳＳの場合、最もポイントが高いのは#wrap のところで、１００点です。
#wrap { color:red;}
.lists li { color:green;}
li {color:blue;}
下記のＨＴＭＬの「あいうえお」は上記のどの部分も適用され得ますが、前述の通り、#wrapが適用され、赤にナと思っているのですが、ＩＥでもＦＦでも、緑となってしまいます。
ＣＳＳの２行目の.list liを取り除いた場合はli の方が適用され、青になってしまいます。
「ＣＳＳの優先順」に関しては、ポイント形式よりも去らに前提となる条件があるのでしょうか？？
どなたか教えてください。宜しくお願い致します。
<div id="wrap">
<ul class="lists">
<li>あいうえお</li>
</ul>
</div>
No.1
92
8
60pt
たとえば、
<div id="wrap"> <ul> <li>あいうえお</li> </ul> </div>
というHTMLに
#wrap { color: red; }
というCSSを適用させると、ul要素・li要素にも同じCSSが適用されますが、なぜ子要素にまで適用されるかというと、ul要素・li要素が「継承」しているからです。
継承は、自身にCSS属性が指定されていない場合に行われます。
よって、
#wrap { color:red;} .lists li { color:green;} li {color:blue;}
というCSSであれば、すでにli要素にcolor属性が指定されているので、こちらが優先されて文字色が青になるのです。
なお、.lists liセレクタとliセレクタは同じliに対して適用しようとしていますが、どうしてliセレクタの方が優先されるのかはちょっと分かりませんでした。すみません。
No.1
928
ここでベストアンサー
60pt
たとえば、
<div id="wrap"> <ul> <li>あいうえお</li> </ul> </div>
というHTMLに
#wrap { color: red; }
というCSSを適用させると、ul要素・li要素にも同じCSSが適用されますが、なぜ子要素にまで適用されるかというと、ul要素・li要素が「継承」しているからです。
継承は、自身にCSS属性が指定されていない場合に行われます。
よって、
#wrap { color:red;} .lists li { color:green;} li {color:blue;}
というCSSであれば、すでにli要素にcolor属性が指定されているので、こちらが優先されて文字色が青になるのです。
なお、.lists liセレクタとliセレクタは同じliに対して適用しようとしていますが、どうしてliセレクタの方が優先されるのかはちょっと分かりませんでした。すみません。
ありがとうございます。
そうですね、仰るとおり継承の問題の気がします。
.lists li { color:green;}
li {color:blue;}
の場合ならば緑になるのは、11点と1点なので。１１点の.lists li が勝ちということで理解できます。
すっきりしました。有難う御座いました。
No.2
43513
10pt
wrapとlistsでは、listsの方が内側にあるので、こちらが優先される
---
.lists li { color:green;}
li {color:blue;}
---
では、.lists li のほうがより細かい分類なので、こちらのほうが優先される
解答有難う御座います。
「内側にある」というのは、ちょっと適切でないかもしれません。
下記のソースを見ていただくと、下の方が内側で細かく記述してます。
しかしこの場合はＩＤが２つある上の設定の方が点数で上回るので、結果赤になります。
#top #wrap li{ color:red;}
div#wrap ul.lists li { color:blue;}
------------------------------------------
<body id="top">
</body>
No.3
206
10pt
CSSの優先度は、より対象を限定できるものの方が優先されるのではないでしょうか？
１．同じidを持つタグは存在しないのでidは何よりも優先度が高い
２．「同名タグすべて」とclassでは、classの限定的なので優先度が高い
という感じで。
提示された例だと、idのあるタグの内側に、さらにタグがあります。
その場合、その内側のタグを連想させるものの方が、より限定的です。
「あいうえお」の親はだれかといわれたら、日本語で表現すると
「listsクラスのliタグ」といえると思います。
wrapというidを持っているのはさらにその親のタグなので、「あいうえお」を
限定する上ではulタグやliタグよりも弱いかなと思います。
お望みの結果を出したいだけならば、次のようにIDで対象を限定すれば
良いかと思います。
57
55
<ul class="lists">
<li id="wrap">あいうえお</li>
</ul>
さらに言うならば、タグに直接スタイルを書き込むのが何より限定的な気がします。
こんばんわ、解答有難う御座います。
>CSSの優先度は、より対象を限定できるものの方が優先されるのではないでしょうか？
QuestR2さんへの返信のところで書きましたが、必ずしもそうではないと思います。
今回のケースではkazubokkuriさんの解答の通り、「継承」だと思います。
解答いただきまして有難う御座いました。
haruo-31
2009/05/24 21:12:12
ruijio
Mars
2
1
1
ありがとうございます。
そうですね、仰るとおり継承の問題の気がします。
.lists li { color:green;}
li {color:blue;}
の場合ならば緑になるのは、11点と1点なので。１１点の.lists li が勝ちということで理解できます。
すっきりしました。有難う御座いました。