ホームページ > 記事 > ウェブフロントエンド > CSSのセレクターと優先度について詳しく解説
CSSのセレクターと優先度について詳しく解説
- 青灯夜游転載
- 2020-07-29 17:04:563965ブラウズ
CSS セレクターの優先順位関係は次のとおりです:
#!重要>インライン>ID セレクター>クラス セレクター> タグ セレクター。
これらのルールに従って数値の文字列を少しずつ加算して最終的な重みを取得し、比較して選択するときは左から右の順序に従います。 。 比較する。
1. テキスト内のスタイルの優先順位は 1,0,0,0 であるため、常に外部定義よりも高くなります。ブラウザにも優先順位アルゴリズムがあります。ブラウザの優先順位は、A、B、C、D の値によって決まります。計算ルールは次のとおりです。2.
! important で宣言されたルールは何よりも優先されます。 3. ! important 宣言が矛盾する場合は、優先度が比較されます。
4. 優先順位が同じ場合は、ソースコード内での出現順に決定され、後のものが優先されます。
5. 継承によって取得されたスタイルには詳細性の計算がなく、他のすべてのルール (グローバル セレクター * によって定義されたルールなど) よりも低くなります。
- inline style が存在する場合は A=1、それ以外の場合は A=0; B の値は次のようになります。
- ID セレクター の出現回数 C の値は、
- クラス セレクター と 属性セレクター および の合計回数です。 pseudo-class が出現します。 D の値は、
- tag selector と pseudo-element
li /* (0, 0, 0, 1) */ ul li /* (0, 0, 0, 2) */ ul ol+li /* (0, 0, 0, 3) */ ul ol+li /* (0, 0, 0, 3) */ h1 + *[REL=up] /* (0, 0, 1, 1) */ ul ol li.red /* (0, 0, 1, 3) */ li.red.level /* (0, 0, 2, 1) */ a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11 /* (0, 0, 11,0) */ #x34y /* (0, 1, 0, 0) */ li:first-child h2 .title /* (0, 0, 2, 2) */ #nav .selected > a:hover /* (0, 1, 2, 1) */ html body #nav .selected > a:hover /* (0, 1, 2, 3) */# の合計出現数です。 ##比較ルールは、左から右へ比較し、大きい方が勝ち、等しい場合はさらに1つ右に移動して比較します。 4 つのビットがすべて等しい場合、後者のビットが前の
インライン スタイルの優先順位が最も高くなりますが、外部スタイルがインライン スタイルをオーバーライドすることもできます。ただし、そうでない場合は重要です。インライン スタイルをオーバーライドし、慎重に使用してください。 ！ ！
css 基本セレクター
1. タグ セレクター: p タグを使用してすべてのスタイルに一致します p{color:red}
2. ID セレクター: 指定されたタグ #p2{color:red}
3. クラス セレクター: クラスを指定した人が色を変更します。.info{color: red など、複数のオプションが利用可能です}, p.info{color:red}
4. ユニバーサル セレクター: すべてのタグが変更されます
結合セレクター
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*后代选择器，选择所有class为div1后的p标签*/
.div1 p{
background-color: red;
}
/*子代选择器*/
.div3>p{
color:#0000FF;
}
/*相邻选择器*/
.div2+p{
background-color: #008000;
}
/*兄弟选择器*/
.div2~p{
background-color: hotpink;
}
/*多元素选择器*/
.div2,p{
background-color: #7FFFD4;
}
.div1 .div2,.div1~p{
background-color: blueviolet;
font-size: 20px;
}
</style>
</head>
<body>
<!--
1.后代选择器：.div1 p
2.子代选择器：.div3>p
3.多元素选择器：同时匹配所有指定元素 .div1 .div2,.div1~p
4.相邻选择器（紧挨着找相邻的，只找下面不找上面）.div2+p
5.兄弟选择器 .div2~p
-->
<p>你好我是p</p>
<div class="div1">
<div class="div2">
<p>我是div2下p1</p>
<div class="div3">
<p>div3</p>
</div>
</div>
<p>我是div2相邻的元素p</p>
<h1 class="h1">h1</h1>
<h2>h2</h2>
</div>
<div class="div1">
<em>hello world</em>
<div class="div2">
<p>hello world div2</p>
<br/>
<b>hello hello</b>
</div>
</div>
<h3>h3</h3>
<p>最后一个p</p>
</body>
</html>属性セレクター
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1.匹配所有A属性，并且在div中*/
div[A]{
color: aquamarine;
}
/*2.匹配所有A=a1的并且只是在div标签中的*/
div[A=a1]{
color: blueviolet;
/*
* 这个和第一个优先级是相同的
* 应该显示下面的，但是第一个查找的范围广
* 所以也会显示第一个的样式
*/
/*3.匹配所有属性为A，并且具有多个空格分隔的值,其中一个只等于a1的*/
div[A~=a1]{
background-color: darkkhaki;
}
/*4.匹配属性值以指定值开头的每个元素，并且在div标签中*/
div[A^=a]{
background-color: antiquewhite
}
/*5.匹配属性值以指定值结尾的每个元素*/
div[A$=1]{
background-color: blue;
}
/*6.匹配属性值中包含指定值的每个元素 */
div[A*=a] {
background-color: saddlebrown;
}
}
</style>
</head>
<body>
<div>
<div A=" a1 ">1111</div>
<div A="a1">2222</div>
<div A="a2">3333</div>
<div B="a1">4444</div>
</div>
</body>
</html>Pseudo class
アンカー擬似クラス: リンクの表示効果を制御するために特別に使用されます a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
:before p:before 各
要素の前にコンテンツを挿入します
:after p:after 各
要素の後にコンテンツを挿入します
例 ：p:before{content: "hello";color:red;display: block;}
css の継承
継承は、スタイルを特定の要素に適用するだけでなく、子孫にも適用されます
body{color:blue;}本文の要素がスタイルを継承するように本文の色を設定しますが、継承される重みは非常に低く、通常の要素よりもさらに低くなります。要素があれば、継承された色が上書きされます。次のことがわかります。
宣言を表示するルールは、その継承されたスタイルをオーバーライドできます。 CSS 継承にもいくつかの制限があり、
border、margin、padding、backgroundなどの一部のプロパティ は継承できません。お待ちください 関連チュートリアルの推奨事項: CSS ビデオ チュートリアル
、以上がCSSのセレクターと優先度について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。