↩ zhcn 编程语言 Web相关 JSON CSS伪类——伪类选择器（详情）

CSS伪类——伪类选择器（详情）

伪类是 W3C 开发的选择器集的一种特殊状态。通过伪类，您可以设置元素的动态状态，例如悬停（hover）、单击（active）以及文档中无法选择的元素。通过其他选择器例如第一个子元素（first-child）或最后一个子元素（last-child）（这些元素没有ID或类属性）。

伪类名称不区分大小写，但必须以冒号:另外，伪类必须与CSS中的选择器结合使用，语法如下：

选择器：伪类{
财产：价值；
}

这里selector是选择器的名称，pseudoclass是伪类的名称。

CSS提供了多种伪类，如下表所示。

选择器	例子	示例说明
:active	a:active	匹配点击的链接
:checked	input:checked	匹配所选的 <input> 元素。
:disabled	input:disabled	匹配所有禁用的 <input> 元素
:empty	p:empty	匹配任何没有子元素的 <p> 元素
:enabled	input:enabled	匹配所有有效的 <input> 元素
:first-child	p:first-child	匹配父元素<p>的第一个子元素。 <p> 必须是父元素的第一个子元素
:first-of-type	p:first-of-type	匹配父元素的第一个 <p> 元素。
:focus	input:focus	匹配聚焦的 <input> 元素
:hover	a:hover	匹配鼠标悬停在其上的元素
:in-range	input:in-range	将 <input> 元素与指定的值范围匹配。
:invalid	input:invalid	匹配所有具有无效值的 <input> 元素
:lang(language)	p:lang(it)	匹配 lang 属性值以“it”开头的所有 <p> 元素。
:last-child	p:last-child	匹配父元素<p>的最后一个子元素。 <p> 必须是父元素的最后一个子元素
:last-of-type	p:last-of-type	匹配父元素的最后一个 <p> 元素。
:link	a:link	匹配所有未访问的链接
:not(selector)	:not(p)	匹配除 <p> 元素之外的所有元素
:nth-child(n)	p:nth-child(2)	匹配父元素内的第二个子元素<p>。
:nth-last-child(n)	p:nth-last-child(2)	匹配父元素 <p> 的倒数第二个子元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	匹配父元素 <p> 的倒数第二个子元素。
:nth-of-type(n)	p:nth-of-type(2)	匹配父元素 <p> 的第二个子元素。
:only-of-type	p:only-of-type	匹配父元素中唯一的 <p> 元素
:only-child	p:only-child	匹配父元素内唯一的子元素<p>。
:optional	input:optional	匹配没有“required”属性的 <input> 元素。
:out-of-range	input:out-of-range	将 <input> 元素与指定范围之外的值进行匹配
:read-only	input:read-only	匹配指定“readonly”属性的 <input> 元素。
:read-write	input:read-write	匹配没有“readonly”属性的 <input> 元素。
:required	input:required	匹配指定“required”属性的 <input> 元素。
:root	root	匹配元素的根元素。在 HTML 中，根元素始终是 HTML。
:target	#news:target	匹配当前活动的 #news 元素（单击包含其锚点名称的 URL）。
:valid	input:valid	匹配任何具有有效值的 <input> 元素
:visited	a:visited	匹配所有访问过的链接

前面介绍“ Link ”时，我简单介绍了 :link、:visited、:active 和 :hover 伪类的使用，这里不再重复。

1.第一个孩子

伪类first-child可以匹配指定父元素下的第一个子元素。例如， ul li:first-child可以匹配<ul>元素下面的第一个<li>元素。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul li:first-child {     /*マッチ<ul>の最初の<li>タグ*/
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSS位置</li>
        <li>CSS要素のスタッキング</li>
        <li>CSSフロート</li>
    </ul>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_699”对齐=“aligncenter”宽度=“1024”]

图：css第一个子样本[/caption]

2.最后一个孩子

与first-child类似，伪类last-child可以匹配指定父元素下的最后一个子元素，例如ul li:last-child一个<ul>元素下的最后一个<li>可以匹配任意元素。示例代码如下：

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul li:last-child {      /*<ul>タグ内の最後の<li>タグにマッチ*/
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSS位置設定</li>
        <li>CSS要素のスタッキング</li>
        <li>CSSフロート</li>
    </ul>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_700”对齐=“aligncenter”宽度=“1024”] 图：css 最后一个子元素示例

图：css伪类last-child示例[/caption]

3.第n个孩子

伪类nth-chil d 对 CSS3 来说是新的，可以匹配给定元素下面的第 n 个子元素。例如， ul li:nth-child(2)可以匹配<ul>元素下面的第二个<li> 。，示例代码如下：

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul li:nth-child(2) {    /* <ul>タグの2番目の<li>タグにマッチする */
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSS配置</li>
        <li>CSS要素スタック</li>
        <li>CSSフロート</li>
    </ul>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_701”对齐=“aligncenter”宽度=“1024”]

图：css伪类nth-child示例[/caption]

《CSS伪类选择器（详解）》浅显易懂的讲解！您必须观看的 2 个最佳视频

【CSS #3】基礎からちゃんと学ぶ CSS 入門！この講座だけでセレクターは完結できます！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】

https://www.youtube.com/watch?v=3RX0ASjozkc&pp=ygUxQ1NTIOeWkeS8vOOCr-ODqeOCueOCu-ODrOOCr-OCv-ODvCAo6Kmz57SwKSZobD1KQQ%3D%3D

1-1 構造的な擬似要素の応用（CSSの高度なセレクタ）

https://www.youtube.com/watch?v=V0GTy6B2-JA&pp=ygUxQ1NTIOeWkeS8vOOCr-ODqeOCueOCu-ODrOOCr-OCv-ODvCAo6Kmz57SwKSZobD1KQQ%3D%3D

JSON

伪类是 W3C 开发的选择器集的一种特殊状态。通过伪类，您可以设置元素的动态状态，例如悬停（hover）、单击（active）以及文档中无法选择的元素。通过其他选择器例如第一个子元素（first-child）或最后一个子元素（last-child）（这些元素没有ID或类属性）。

伪类名称不区分大小写，但必须以冒号:另外，伪类必须与CSS中的选择器结合使用，语法如下：

选择器：伪类{
财产：价值；
}

这里selector是选择器的名称，pseudoclass是伪类的名称。

CSS提供了多种伪类，如下表所示。

选择器	例子	示例说明
:active	a:active	匹配点击的链接
:checked	input:checked	匹配所选的 <input> 元素。
:disabled	input:disabled	匹配所有禁用的 <input> 元素
:empty	p:empty	匹配任何没有子元素的 <p> 元素
:enabled	input:enabled	匹配所有有效的 <input> 元素
:first-child	p:first-child	匹配父元素<p>的第一个子元素。 <p> 必须是父元素的第一个子元素
:first-of-type	p:first-of-type	匹配父元素的第一个 <p> 元素。
:focus	input:focus	匹配聚焦的 <input> 元素
:hover	a:hover	匹配鼠标悬停在其上的元素
:in-range	input:in-range	将 <input> 元素与指定的值范围匹配。
:invalid	input:invalid	匹配所有具有无效值的 <input> 元素
:lang(language)	p:lang(it)	匹配 lang 属性值以“it”开头的所有 <p> 元素。
:last-child	p:last-child	匹配父元素<p>的最后一个子元素。 <p> 必须是父元素的最后一个子元素
:last-of-type	p:last-of-type	匹配父元素的最后一个 <p> 元素。
:link	a:link	匹配所有未访问的链接
:not(selector)	:not(p)	匹配除 <p> 元素之外的所有元素
:nth-child(n)	p:nth-child(2)	匹配父元素内的第二个子元素<p>。
:nth-last-child(n)	p:nth-last-child(2)	匹配父元素 <p> 的倒数第二个子元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	匹配父元素 <p> 的倒数第二个子元素。
:nth-of-type(n)	p:nth-of-type(2)	匹配父元素 <p> 的第二个子元素。
:only-of-type	p:only-of-type	匹配父元素中唯一的 <p> 元素
:only-child	p:only-child	匹配父元素内唯一的子元素<p>。
:optional	input:optional	匹配没有“required”属性的 <input> 元素。
:out-of-range	input:out-of-range	将 <input> 元素与指定范围之外的值进行匹配
:read-only	input:read-only	匹配指定“readonly”属性的 <input> 元素。
:read-write	input:read-write	匹配没有“readonly”属性的 <input> 元素。
:required	input:required	匹配指定“required”属性的 <input> 元素。
:root	root	匹配元素的根元素。在 HTML 中，根元素始终是 HTML。
:target	#news:target	匹配当前活动的 #news 元素（单击包含其锚点名称的 URL）。
:valid	input:valid	匹配任何具有有效值的 <input> 元素
:visited	a:visited	匹配所有访问过的链接

前面介绍“ Link ”时，我简单介绍了 :link、:visited、:active 和 :hover 伪类的使用，这里不再重复。

1.第一个孩子

伪类first-child可以匹配指定父元素下的第一个子元素。例如， ul li:first-child可以匹配<ul>元素下面的第一个<li>元素。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul li:first-child {     /*マッチ<ul>の最初の<li>タグ*/
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSS位置</li>
        <li>CSS要素のスタッキング</li>
        <li>CSSフロート</li>
    </ul>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_699”对齐=“aligncenter”宽度=“1024”]

图：css第一个子样本[/caption]

2.最后一个孩子

与first-child类似，伪类last-child可以匹配指定父元素下的最后一个子元素，例如ul li:last-child一个<ul>元素下的最后一个<li>可以匹配任意元素。示例代码如下：

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul li:last-child {      /*<ul>タグ内の最後の<li>タグにマッチ*/
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSS位置設定</li>
        <li>CSS要素のスタッキング</li>
        <li>CSSフロート</li>
    </ul>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_700”对齐=“aligncenter”宽度=“1024”] 图：css 最后一个子元素示例

图：css伪类last-child示例[/caption]

3.第n个孩子

伪类nth-chil d 对 CSS3 来说是新的，可以匹配给定元素下面的第 n 个子元素。例如， ul li:nth-child(2)可以匹配<ul>元素下面的第二个<li> 。，示例代码如下：

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul li:nth-child(2) {    /* <ul>タグの2番目の<li>タグにマッチする */
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSS配置</li>
        <li>CSS要素スタック</li>
        <li>CSSフロート</li>
    </ul>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_701”对齐=“aligncenter”宽度=“1024”]

图：css伪类nth-child示例[/caption]