![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
No.3ベストアンサー
- 回答日時:
違います。
「セレクタの優先度」は、誰が指定したか!!、important!(最重要宣言)があるかないかです。
これは詳細度(特異性)-selector's specificityです。
これらのカスケーディングの仕組みは、CSS(カスケーディング スタイル シート)と言われるくらいですから、CSSの根幹!!命!!といえる重要な仕組みです。
まっとうな説明サイトでしたら、まず単位に続いて、この部分が懇切丁寧に書かれているはずです。いきなりプロパティの説明に入るようでしたら、見ないほうが良いです。
まず、優先順位は
[ユーザーの最重要宣言]>[著者の最重要宣言]>[著者の宣言]>[ユーザーの宣言]>デフォルト(ブラウザ)の宣言
です。
次に、詳細度でソートされます。詳細度は基数が大きい4桁の数[a,b,c,d]で比較します。
基数とは10進数だと10,16進数だと16,2進数だと2
・・ここは大きい基数ですから位上がりはしないということです。
全称セレクタ 詳細度[0,0,0,0]
タイプセレクタ,擬似要素 [0,0,0,1]
要素セレクタ,クラスセレクタ,擬似クラスセレクタ[0,0,1,0]
一意セレクタ [0,1,0,0]
HTMLのstyle要素 [1,0,0,0]
HTMLの属性での指定(body bgcolor=redとか)は[0,0,0,0]
です。
そのうえで、「@importや外部スタイルシートはその場所に書かれている」とみなし、同じ優先度、詳細度の場合は後から書かれているもので上書きされます。
それぞれのプロパティには、継承するかしないかも決まっていますので、それも考慮すること。
CSS2以降、
hoge{ color: blue;}
#hoge{ color: red;}
ではありません。CSS2では基点セレクタを先に書きますから、上記は
*.hoge{ color: blue;}
*#hoge{ color: red;}
とみなされます。*(全称セレクタの詳細度は0、できれば、
p.hoge{ color: blue;}
div#hoge{ color: red;}
のほうがベスト(自分自身が分かりやすくなりますし、ブラウザに余計な処理させない)
p.hoge{ color: blue;} 詳細度は[0,0,1,1] 11
div#hoge{ color: red;} 詳細度は[0,1,0,1] 101
div.#hoge p.hoge[color:green;] 詳細度 [0,1,1,2] 詳細度 [0,1,1,2]
まあ、プロパティとかを書く前に、肝心な
5 Selectors( http://www.w3.org/TR/CSS2/selector.html )
6 Assigning property values, Cascading, and Inheritance( http://www.w3.org/TR/CSS2/cascade.html )
を徹底的に身につけましょう。
この部分は、【CSS2.1】では、【CSS2】からいくつか変更になっています。
★現在ウェブ標準は、【CSS2.1】のほうです。
この回答へのお礼
お礼日時:2013/11/24 11:14
回答ありがとうございます
検索しまくって継承の詳細度を調べてみました
なんと、継承による詳細度は0点です!
道理で後に出てきた1点より弱くなるわけです^^;
やっと疑問が解けました
No.4
- 回答日時:
CSS2は、今は使われていませんので、CSS2.1のほうのリンクですが原文はNo.2の回答で示しましたが、最新のものは
⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification( http://www.w3.org/TR/CSS2/ )
すこし古いですが、CSS2.1の邦訳は、
⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
です。原文と照らし合わせながら利用してください。
★カスケーディングや詳細度の扱いが変わりました。この質問の部分です!!
★displayの値が変わりました。white-spaceの値が追加されたなど・・
★音声出力用のスタイルは附則になりました。
いくつか大事なところが変更されていますから、CSS2.1のほうを参照すること。
⇒変更点(CSS2.1 Appendix C 邦訳)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
No.2
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript 【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい 1 2022/07/29 20:52
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- Visual Basic(VBA) Selenium Basicの件 5 2023/04/10 20:55
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
個別にリンクの色を変える方法
-
【CSS】特定のリンクを含むaタ...
-
display:table-cell内でこんな...
-
cssでリンクに下線を表示したり...
-
.section1.section2 という書き...
-
はじめてのウェブページ
-
CSSのスタイルシート適用について
-
透過背景を解除するにはどうす...
-
HP作成(ワッパーを中心に)
-
CSSを多用すると遅くなる?
-
CSSで背景画像をランダムに同画...
-
classとidの名前の付け方
-
今スタイルシートを学んでいる...
-
CSS idセレクタについて教えて...
-
CSSのクラス名・ID名の指定でワ...
-
CSSに同じclass名がいっぱい‥。...
-
htmlの文字が縦書きになる
-
html の divとtable の役割
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSのクラス名・ID名の指定でワ...
-
CSSに同じclass名がいっぱい‥。...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
liリストタグの背景色に色がつ...
-
HTML要素のid/class名の長さに...
-
brにクラスをつけてcssでdispla...
-
透過背景を解除するにはどうす...
-
htmlのid属性って必要なの?
-
スタイルシートでデザイン
-
フロートのクリアについて
-
ページの左右の余白(枠外)に...
-
CSS, リンクの色を一部変えるに...
-
サイトにjQueryが使用されてい...
-
CSSで、DIV#hogeという記述は何...
-
Bootstrap3でcontainerがずれる...
-
スタイルシートで、id属性の中...
-
外部css定義したclassをht...
-
divの入れ子を多用してページを...
おすすめ情報