ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS セレクターの優先順位の説明_html/css_WEB-ITnose

CSS セレクターの優先順位の説明_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 08:54:111066ブラウズ

翻訳:https://www.w3.org/TR/CSS2/cascade.html#computed-value

いくつかの例:

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<HEAD><STYLE type="text/css">  #x97z { color: red }</STYLE></HEAD><BODY><P ID=x97z style="color: green"></BODY>

上の例では、P 要素の色は緑色になります。カスケード ルール 3 により、「style」属性の宣言は STYLE 要素の宣言よりも優先されます。これは、より具体性が高いためです。


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。