CSS pseudo-classes_html/css_WEB-ITnose の深い理解

× Catalog [1] Anchor [2] UI Element [3] Structural Pseudo-Class [4] その他

前の単語

疑似クラスは、同様の効果を持つ疑似要素とよく混同されます。実際の要素を追加することによって達成される効果は実現でき、擬似クラスの効果は実際のクラスを追加することによって達成されるものと同様です。実際、この 2 つを区別するために、CSS3 では、疑似クラスは 1 つのコロンで表され、疑似要素は 2 つのコロンで表されると明確に規定されています。この記事では、疑似クラスの詳しい知識を詳しく紹介します

アンカーポイント

アンカーポイント 3499910bf9dac5ae3c52d5ede7383485 に関しては、次の 5 つの一般的な疑似クラスがあります。 :訪問しました

rree

rree

rree

rree

rree

Pseudo-class order

疑似クラス秩序の合言葉は愛です-擬似クラスを表す憎悪。順序は、リンク、訪問済み、フォーカス、ホバー、アクティブです。しかし、疑似クラスの順序はこれだけでしょうか?なぜこの注文なのか？

CSS カスケードには非常に重要なルールがあります。つまり、後部が前部をカバーするため、疑似クラスの順序を慎重に考慮する必要があります。

【1】linkとvisitedは先頭になければなりません、順序はありません、それ以外の場合はlinkやvisitedの効果が上書きされます

【注】linkとvisitedは静的疑似クラスと呼ばれるものでのみ適用可能です。 hyperlinks

2] hover、active、focus の 3 つの疑似クラスは、focus、hover、active の順序でなければなりません。hover と active もフォーカス状態でトリガーする必要があり、active、hover をトリガーするには、最初にトリガーする必要があるため、active を配置する必要があります Behind hover

[注] hover、active、focus は動的疑似クラスと呼ばれ、任意の要素に適用できますが、IE7 ブラウザーは :focus、:hover および をサポートしていません。 :active (IE6 ブラウザーでは 553a280de7202c0dce8dfe871821475e 設定のみをサポート)

したがって、最終的な順序は 2 つだけです: リンク、訪問済み、フォーカス、ホバー、アクティブまたは訪問済み、リンク、フォーカス、ホバー、アクティブ

a:link{background-color:pink;}/*品红，未访问*/

UI要素擬似クラス

UI要素擬似 クラスにはenabled、:disabled、:checkedが含まれます。主にHTMLのフォーム要素用です。 ] 入力と: と有効化の間には 2 つの違いがあります スペースは許可されません

構造擬似クラス

構造擬似クラスは次の 3 つの状況に分けられ、IE8 ブラウザではサポートされていません

//以下の場合、Eが親要素、Fが子要素になります

【 1】:nth-child(n), :nth-last-child(n), first-child, last-child, :only- child

a:hover{background-color:lightblue;}/*浅蓝，鼠标悬停*/

[注]:firsr-child と :last-child は IE6 のみです - ブラウザは

をサポートしていません

n は整数 (1 から始まる)、数式、またはキーワード (偶数、奇数) です。

a:active{background-color:lightgreen;}/*浅绿，正被点击*/

a:focus{background-color:lightgrey;}/*浅灰，拥有焦点*/

a:visited{color:orange;}/*字体颜色为橙色，已被访问*//*[注意]visited伪类只能设置字体颜色的样式*/

【2】: nth-of-type(n)、:nth-last-of-type(n)、:first-of-type、:last-of- type、:only-of-type

a:link{background-color:pink;}/*品红，未访问*/a:visited{color:orange;}/*字体颜色为橙色，已被访问*/a:focus{background-color:lightgrey;}/*浅灰，拥有焦点*/a:hover{background-color:lightblue;}/*浅蓝，鼠标悬停*/a:active{background-color:lightgreen;}/*浅绿，正被点击*/

:enabled    可用状态:disabled   不可用状态:checked    选中状态    

input:enabled{    border: 1px solid black;    background-color: transparent;}input:disabled{    border: none;    background-color: gray;}input:checked{    outline: 2px solid lightblue;}

【3】:root, :not, :empty, :target

<button onclick = "btn.disabled = false;">按钮可用</button><br /><button onclick = "btn.disabled = true;">按钮不可用</button><br /><input type="button" id="btn" value="按钮"><br /><br><label>Male<input type="radio" name="sex" /></label><br /><label>Female<input type="radio" name="sex"  /></label>

[注]: not セレクターのみがサポートされていますsafari9+ および ios9.2+ ブラウザで動作

E F:nth-child(n)           选择父元素的第n个子元素E F:nth-last-child(n)      选择父元素的倒数第n个子元素E F:first-child            父元素的第一个子元素，与E F:nth-child(1)等同E F:last-child             父元素的最后一个子元素，与E F:nth-last-child(1)等同E F:only-child             选择父元素中只包含一个子元素

p:first-child    　　 代表的并不是<p>的第一个子元素，而是<p>元素是某元素的第一个子元素p > i:first-child    匹配所有<p>元素中的第一个<i>元素p:first-child i 　　  匹配所有作为第一个子元素的<p>元素中的所有<i>元素

Others

【1】:lang() 特定の言語に一致、IE7 ブラウザは

li:nth-child(odd){color: red;} li:nth-last-child(3){color: green;}li:first-child{color: blue;}li:last-child{color: yellow;}div:only-child{background-color:lightgrey;}

をサポートしていません

【2】いいえ単一の疑似クラスのみを使用できますが、疑似クラスを組み合わせて使用​​することもできます

[注] 順序は関係ありません

<ul>    <li><div>第一个DIV</div></li>    <li><div>第二个DIV</div></li>    <li><div>第三个DIV</div></li>    <li><div>第四个DIV</div></li>    <li><div>第五个DIV</div></li>    <li><div>第六个DIV</div></li>        </ul>

E F:nth-of-type(n)          选择父元素的具有指定类型的第n个子元素E F:nth-last-of-type(n)     选择父元素的具有指定类型的倒数第n个子元素E F:first-of-type           选择父元素中具有指定类型的第1个子元素，与E F:nth-of-type(1)相同E F:last-of-type         　  选择父元素中具有指定类型的最后1个子元素，与E F:nth-last-of-type(1)相同E F:only-of-type        　　 选择父元素中只包含一个同类型的子元素