CSS Pseudo Class 伪类

前言

• CSS 伪类是用来添加一些选择器的特殊效果。

• 伪类可以看作以选中元素为基准点，此元素的一些状态或属性。

选择器	示例	描述	CSS	备注	🔗
:checked	input:checked	选择所有选中的表单元素	3		🔗
:disabled	input:disabled	选择所有禁用的表单元素	3		🔗
:empty	p:empty	选择所有没有子元素的 p 元素	3		🔗
:enabled	input:enabled	选择所有启用的表单元素	3		🔗
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素	3		🔗
:in-range	input:in-range	选择元素指定范围内的值	3		🔗
:invalid	input:invalid	选择所有无效的元素	3		🔗
:last-child	p:last-child	选择所有 p 元素的最后一个子元素	3		🔗
:last-of-type	p:last-of-type	选择每个 p 元素是其母元素的最后一个 p 元素	3		🔗
:not(selector)	:not(p)	选择所有 p 以外的元素	3		🔗
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素	3		🔗
:nth-last-child(n)	p:nth-last-child(2)	选择所有 p 元素倒数的第二个子元素	3		🔗
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有 p 元素倒数的第二个为 p 的子元素	3		🔗
:nth-of-type(n)	p:nth-of-type(2)	选择所有 p 元素第二个为 p 的子元素	3		🔗
:only-of-type	p:only-of-type	选择所有仅有一个子元素为 p 的元素	3		🔗
:only-child	p:only-child	选择所有仅有一个子元素的 p 元素	3		🔗
:optional	input:optional	选择没有 “required” 的元素属性	3		🔗
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性	3		🔗
:read-only	input:read-only	选择只读属性的元素属性	3		🔗
:read-write	input:read-write	选择没有只读属性的元素属性	3		🔗
:required	input:required	选择有 “required” 属性指定的元素属性	3		🔗
:root	root	选择文档的根元素	3		🔗
:target	#news:target	选择当前活动 #news 元素 (点击 URL 包含锚的名字)	3		🔗
:valid	input:valid	选择所有有效值的属性	3		🔗
:link	a:link	选择所有未访问链接	1		🔗
:visited	a:visited	选择所有访问过的链接	1		🔗
:hover	a:hover	把鼠标放在链接上的状态	1		🔗
:active	a:active	选择正在活动链接	1		🔗
:focus	input:focus	选择元素输入后具有焦点	2		🔗
:first-letter	p:first-letter	选择每个 <p> 元素的第一个字母	1		🔗
:first-line	p:first-line	选择每个 <p> 元素的第一行	1		🔗
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <p> 元素	2		🔗
:before	p:before	在每个 <p> 元素之前插入内容	2		🔗
:after	p:after	在每个 <p> 元素之后插入内容	2		🔗
:lang(language)	p:lang(it)	为 <p> 元素的 lang 属性选择一个开始值	2		🔗

1、语法

• 伪类的语法：

  selector:pseudo-class {
      property: value;
  }

1.1 伪类和 CSS 类

• 伪类可以与 CSS 类配合使用。

• 语法：

  selector.class:pseudo-class {
      property: value;
  }

• 实例

  <style>
      a.red:link {
          color: #FF0000;
      }
  </style>

  <a class="red" href="css-syntax.html">CSS 语法</a>

• 效果

  

2、anchor 伪类

• 在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示。

选择器	示例	描述	CSS	备注	🔗
:link	a:link	选择所有未访问链接	1		🔗
:visited	a:visited	选择所有访问过的链接	1		🔗
:hover	a:hover	把鼠标放在链接上的状态	1		🔗
:active	a:active	选择正在活动链接	1		🔗

• 注意：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。

• 注意：伪类的名称不区分大小写。

• 实例

  <style>
      a:link {	/* 未访问链接*/
          color: #000000;	
      }
      a:visited {	/* 已访问链接 */
          color: #00FF00;
      }
      a:hover {	/* 鼠标移动到链接上 */
          color: #FF00FF;
      }
      a:active {	/* 鼠标点击时 */
          color: #0000FF;
      }
  </style>

  <p><b><a href="https://blog.qianchia.com" target="_blank">这是一个链接</a></b></p>

• 效果

  

3、:first-child 伪类

• 可以使用 :first-child 伪类来选择父元素的第一个子元素。

选择器	示例	描述	CSS	备注	🔗
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <p> 元素	2		🔗

• 注意：在 IE8 的之前版本必须声明 <!DOCTYPE>，这样 :first-child 才能生效。

3.1 匹配第一个 < p > 元素

• 实例

  <style>
      p:first-child {
          color: blue;
      }
  </style>

  <p>This is some text.</p>
  <p>This is some text.</p>

• 效果

  This is some text.

  
  

  This is some text.

3.2 匹配所有 < p > 元素中的第一个 < i > 元素

• 实例

  <style>
      p>i:first-child {
          color: blue;
      }
  </style>

  <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
  <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

• 效果

  I am a strong man. I am a strong man.

  
  

  I am a strong man. I am a strong man.

3.3 匹配所有作为第一个子元素的 < p > 元素中的所有 < i > 元素

• 实例

  <style>
      p:first-child i {
          color: blue;
      }
  </style>

  <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
  <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

• 效果

  I am a strong man. I am a strong man.

  
  

  I am a strong man. I am a strong man.

4、:focus 伪类

• :focus 伪类用于选择具有焦点的元素。

选择器	示例	描述	CSS	备注	🔗
:focus	input:focus	选择元素输入后具有焦点	2		🔗

• 提示: :focus 选择器接受键盘事件或其他用户输入的元素。

• 实例

  <style>
      input:focus {
          background-color: yellow;
      }
  </style>

  <p>点击文本输入框表单可以看到黄色背景:</p>
  <form>
      First name: <input type="text" name="firstname" /><br>
      Last name: <input type="text" name="lastname" />
  </form>

• 效果

  点击文本输入框表单可以看到黄色背景:

  
  First name:
  
  Last name:
  

5、:lang 伪类

• :lang 伪类使你有能力为不同的语言定义特殊的规则。

选择器	示例	描述	CSS	备注	🔗
:lang(language)	p:lang(it)	为 <p> 元素的 lang 属性选择一个开始值	2		🔗

• 注意：IE8 必须声明 <!DOCTYPE> 才能支持 :lang 伪类。

• 实例

  <style>
      q:lang(no) {
          quotes: "~""~";
      }
  </style>

  <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
  <p>在这个例子中，:lang 定义了 q 元素的值为 lang =“no”</p>

• 效果

  Some text A quote in a paragraph Some text.

  
  

  在这个例子中，:lang 定义了 q 元素的值为 lang =“no”

6、CSS 实例

• 添加不同颜色的超链接


• 给超链接添加其他样式


• 使用：焦点


• :first-child - 匹配了第一个 p 元素


• :first-child - 匹配了 p 元素中的第一个 i 元素


• :first-child - 匹配了第一个 p 元素中的所有 I 元素


• 使用：lang