[分享]css3所有伪类

发布于 2024-11-11 15:37:38

CSS3中有多种伪类，用来选择文档中的不同元素，以添加样式或效果。以下是CSS3中所有伪类的介绍：:active 当元素被激活（例如，用户点击它时）时，应用样式。 :hover 当鼠标悬停在元素上时，...

CSS3中有多种伪类，用来选择文档中的不同元素，以添加样式或效果。以下是CSS3中所有伪类的介绍：

<p>:active</p>
<p>当元素被激活（例如，用户点击它时）时，应用样式。</p>

<p>:hover</p>
<p>当鼠标悬停在元素上时，应用样式。</p>

<p>:focus</p>
<p>当元素获得焦点时，应用样式。可以用于<a>，<input>等表单元素。</p>

<p>:first-child</p>
<p>选择一个元素的第一个子元素。</p>

<p>:last-child</p>
<p>选择一个元素的最后一个子元素。</p>

<p>:nth-child(n)</p>
<p>根据指定的公式选择一个元素的第n个子元素。</p>

<p>:nth-last-child(n)</p>
<p>根据指定的公式选择一个元素的倒数第n个子元素。</p>

<p>:nth-of-type(n)</p>
<p>根据指定的公式选择元素的第n个同类型兄弟元素。</p>

<p>:nth-last-of-type(n)</p>
<p>根据指定的公式选择元素的倒数第n个同类型兄弟元素。</p>

<p>:first-of-type</p>
<p>选择元素的第一个同类型兄弟元素。</p>

<p>:last-of-type</p>
<p>选择元素的最后一个同类型兄弟元素。</p>

<p>:only-child</p>
<p>选择仅有一个子元素的元素。</p>

<p>:only-of-type</p>
<p>选择同类型兄弟元素唯一的元素。</p>

<p>:root</p>
<p>选择整个文档的根元素，通常是<html>元素。</p>

<p>:not(selector)</p>
<p>选择与指定选择器不匹配的元素。</p>

<p>:checked</p>
<p>选择已选中（例如，复选框或单选按钮已选中）的元素。</p>

<p>:disabled</p>
<p>选择已被禁用（例如，输入字段被禁用）的元素。</p>

<p>:enabled</p>
<p>选择已启用（例如，输入字段启用）的元素。</p>

<p>:empty</p>
<p>选择没有任何子元素的元素。</p>

<p>:target</p>
<p>选择文档中的目标元素（例如，链接指向页面中的锚点）。</p>

css 教程

一个月内的热帖推荐

91云脑

Lv.1普通用户

62849 帖子	14 小组	291 积分

62849

帖子

小组

291

积分

关注作者

发帖	回复	分享

赞助商广告

本组热帖