百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

前端入门——css伪类和伪元素

zhezhongyun 2025-05-11 19:39 22 浏览

伪类(pseudo-class)用于定义元素的特殊状态,伪元素(pseudo-element)用于设置元素指定部分的样式,语法如下:

伪类

selector:pseudo-class {
  property: value;
}

伪元素

selector::pseudo-element {
  property: value;
}

伪类以“:”单个冒号开头,伪元素以“::”两个冒号开头,注意区分它们的,比较容易混淆。

伪元素选择器

常用的伪元素有这些:

选择器

例子

例子描述

::after

p::after

在每个 <p> 元素之后插入内容。

::before

p::before

在每个 <p> 元素之前插入内容。

::first-letter

p::first-letter

选择每个 <p> 元素的首字母。

::first-line

p::first-line

选择每个 <p> 元素的首行。

::selection

p::selection

选择用户选择的元素部分。

如下示例:

<html>
<head>
<style>
p::before
{
content:"台词:";
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</body>
</html>

效果:

同理:after是在结尾插入字符,::after 和 ::before 常和content属性配合使用,用来出入特殊字符等。

伪元素可以是单冒号,可以是双冒号,较规范使用建议是双冒号。一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

其它的伪元素可以参考:

https://www.w3school.com.cn/css/css_pseudo_elements.asp

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

伪类按照功能可以分为以下几种:

  1. 伪类 —— 作用于链接a标签元素,常用来定义链接的不同状态。
  2. 表单相关伪类——作用于表单元素,常用来定义表单不同的行为状态。
  3. 扩展选择型伪类——按照逻辑规则选择元素,比如选择最后一个子元素,偶数或奇数序列的元素等。
  4. 其它伪类

锚伪类

伪类主要用于a链接上,比如鼠标经过链接,点击链接后等状态,使用伪类可以定义不同状态下链接的样式,如下示例:

html:

<a>链接</a>

css:

/* 未访问的链接 */
a:link {
  color: #FF0000;
}
/* 已访问的链接 */
a:visited {
  color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}
/* 已选择的链接 */
a:active {
  color: #0000FF;
}

显示效果:

一般按照 :link、:visited、:hover、:active 的顺序(LVHA)使用,其中:hover 会被其它的伪类覆盖,为了确保:hover生效,:hover 需要放在 :link 和 :visited 之后,:active 之前。

:link 伪类,只有当a链接有href属性且是有效的链接,才会起作用,如下示例:

<a href="#" target="_blank">这是一个链接</a>

href属性改成上面这样时,:link不起作用,按理应该显示红色,但却显示绿色。

:hover 伪类可以在任何元素上使用,其用处很多,比如鼠标经过显示隐藏效果。

如下示例:

div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}
div:hover {
  background-color: blue;
}

使用:hover 另一个典型的例子就是,制作下拉菜单,不需要使用JavaScript,如下示例:

demo 演示可以看这里:
https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3700/3e1094a1c7b42332b9bdef0d0b0c4a7f/css_dropdown_menu.html

除了以上几种链接相关的伪类,还有一个突出显示当前活动的锚链接——:target 伪类。如下示例:

html

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

css

:target {
		border: 2px solid #D4D4D4;
		background-color: #e5eecc;
}

效果显示:

表单相关伪类

此类伪类都是和表单元素有关的,比如下面这些:

选择器

例子

例子描述

:checked

input:checked

选择每个被选中的 <input> 元素。

:disabled

input:disabled

选择每个被禁用的 <input> 元素。

:enabled

input:enabled

选择每个已启用的 <input> 元素。

:focus

input:focus

选择获得焦点的 <input> 元素。

:in-range

input:in-range

选择具有指定范围内的值得 <input> 元素。

:invalid

input:invalid

选择所有具有无效值的 <input> 元素。

: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> 元素。

:valid

input:valid

选择所有具有有效值的 <input> 元素。

在这里介绍几个常用的,比如:checked,匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项),如下示例:

html:

<div>
  <input type="radio" name="my-input" id="yes">
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no">
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in">
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>

css

div,
select {
  margin: 8px;
}

/* Labels for checked inputs */
input:checked + label {
  color: red;
}

/* Radio element, when checked */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* Checkbox element, when checked */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* Option elements, when selected */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

效果显示:

注意:不同的浏览器通过:checked伪类渲染出来的效果也不尽相同。

再看另一个 :disabled 伪类,匹配禁用的的表单元素,如下示例:

html:

<form action="#">
  <fieldset id="shipping">
    <legend>非禁用状态</legend>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Address">
    <input type="text" placeholder="Zip Code">
  </fieldset>
  <br>
  <fieldset id="billing">
    <legend>禁用状态</legend>
    <input type="text" placeholder="Name" disabled>
    <input type="text" placeholder="Address" disabled>
    <input type="text" placeholder="Zip Code" disabled>
  </fieldset>
</form>

css:

input
{
background:#ffff00;
}
input:disabled
{
background:#dddddd;
}

效果:

如上图,可以看到禁用输入框背景色是灰色。

扩展选择型伪类

这类伪类,是用来弥补css选择器的不足,比如如果我想选择当前元素里所有p元素最后一个怎么办?

相关伪类主要有如下这些:

选择器

例子

例子描述

:first-child

p:first-child

选择所有元素下级的第一个 <p> 元素,且必须是第一个子元素。

:first-of-type

p:first-of-type

选择所有元素下级的首个出现的<p> 元素,不必是第一子元素。

:last-child

p:last-child

选择所有元素下级的最后一个<p> 元素,且必须是最后一个子元素。

:last-of-type

p:last-of-type

选择所有元素下级的最后出现的<p> 元素,不必是最后一个子元素。

: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

代表了任意一个元素,这个元素没有其他相同类型的兄弟元素。

:only-child

p:only-child

匹配没有任何兄弟元素的元素。

first-*、last-*开头、nth-*、only-*的伪类,都是指所有元素节点下匹配的元素。

如下示例:

p:first-child 匹配所有节点中第一个子节点是<p>元素的节点。

代码:

<html>
<head>
<style>
p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>
<p>这个段落是其父元素(body)的首个子元素。</p>
<h1>欢迎访问我的主页</h1>
<p>这个段落不是其父元素的首个子元素。</p>
<div>
<p>这个段落是其父元素(div)的首个子元素。</p>
<p>这个段落不是其父元素的首个子元素。</p>
</div>
</body>
</html>

效果:

同理,p:last-child 匹配所有节点中最后一个子节点是<p>元素的节点。

-of-type 结尾的伪类指特定类型的元素,和特定的元素位置无关,比如:first-child 和 :first-of-type的区别就是,前者匹配的元素必须是第一个子元素,后者只要是首次出现的就可以,通俗将就是前者是相对于父级计算位置,后者是相对于同级兄弟节点计算的。

如下示例:

<head>
<style> 
p:first-of-type
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<span>文字</span>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
</div>

效果:

如上图,p元素并非第一个子元素,这就是*-of-type伪类的特点。

only-开头的伪类是指唯一性,比如p:only-child 指其父元素下只有一个p元素时,且必须是第一个子元素,only-of-type 的区别就是不必是第一个子元素。

如下示例:

<head>
<style> 
p:only-child
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<p>这是一个段落。</p>
</div>
<div>
<span>这是一个 span。</span>
<p>这是一个段落。</p>
</div>

效果:

当给第一个段落同级加上其它元素,你会发现only-child就不起作用了。

这部分伪类,比较晦涩难懂,多加练习,一定要明白这几种直接的区别才行。

其它伪类

比如:root、:empty、等,还有其它处在实验阶段的伪类,在这里不一一介绍了。

关于伪类知识,可以参考:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

https://www.w3school.com.cn/css/css_pseudo_classes.asp

相关推荐

一篇文章带你了解SVG 渐变知识(svg动画效果)

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。SVG渐变主要有两种类型:(Linear,Radial)。一、SVG线性渐变<linearGradie...

Vue3 实战指南:15 个高效组件开发技巧解析

Vue.js作为一款流行的JavaScript框架,在前端开发领域占据着重要地位。Vue3的发布,更是带来了诸多令人兴奋的新特性和改进,让开发者能够更高效地构建应用程序。今天,我们就来深入探讨...

CSS渲染性能优化(低阻抗喷油器阻值一般为多少欧)

在当今快节奏的互联网环境中,网页加载速度直接影响用户体验和业务转化率。页面加载时间每增加100毫秒,就会导致显著的流量和收入损失。作为前端开发的重要组成部分,CSS的渲染性能优化不容忽视。为什么CSS...

前端面试题-Vue 项目中,你做过哪些性能优化?

在Vue项目中,以下是我在生产环境中实践过且用户反馈较好的性能优化方案,整理为分类要点:一、代码层面优化1.代码分割与懒加载路由懒加载:使用`()=>import()`动态导入组件,结...

如何通过JavaScript判断Web页面按钮是否置灰?

在JavaScript语言中判断Web页面按钮是否置灰(禁用状态),可以通过以下几种方式实现,其具体情形取决于按钮的禁用方式(原生disabled属性或CSS样式控制):一、检查原生dis...

「图片显示移植-1」 尝试用opengl/GLFW显示图片

GLFW【https://www.glfw.org】调用了opengl来做图形的显示。我最近需要用opengl来显示图像,不能使用opencv等库。看了一个glfw的官网,里面有github:http...

大模型实战:Flask+H5三件套实现大模型基础聊天界面

本文使用Flask和H5三件套(HTML+JS+CSS)实现大模型聊天应用的基本方式话不多说,先贴上实现效果:流式输出:思考输出:聊天界面模型设置:模型设置会话切换:前言大模型的聊天应用从功能...

ae基础知识(二)(ae必学知识)

hi,大家好,我今天要给大家继续分享的还是ae的基础知识,今天主要分享的就是关于ae的路径文字制作步骤(时间关系没有截图)、动态文字的制作知识、以及ae特效的扭曲的一些基本操作。最后再次复习一下ae的...

YSLOW性能测试前端调优23大规则(二十一)---避免过滤器

AlphalmageLoader过滤器是IE浏览器专有的一个关于图片的属性,主要是为了解决半透明真彩色的PNG显示问题。AlphalmageLoader的语法如下:filter:progid:DX...

Chrome浏览器的渲染流程详解(chrome预览)

我们来详细介绍一下浏览器的**渲染流程**。渲染流程是浏览器将从网络获取到的HTML、CSS和JavaScript文件,最终转化为用户屏幕上可见的、可交互的像素画面的过程。它是一个复杂但高度优...

在 WordPress 中如何设置背景色透明度?

最近开始写一些WordPress专业的知识,阅读数奇低,然后我发一些微信昵称技巧,又说我天天发这些小学生爱玩的玩意,写点文章真不容易。那我两天发点专业的东西,两天发点小学生的东西,剩下三天我看着办...

manim 数学动画之旅--图形样式(数学图形绘制)

manim绘制图形时,除了上一节提到的那些必需的参数,还有一些可选的参数,这些参数可以控制图形显示的样式。绘制各类基本图形(点,线,圆,多边形等)时,每个图形都有自己的默认的样式,比如上一节的图形,...

Web页面如此耗电!到了某种程度,会是大损失

现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说,电池寿命都很重要。在这篇文章里,我们将讨论影响电池寿命的因素,以及作为一个web开发者,我们如何让网页耗电更少,以便用户有更多时间来关注我们的...

11.mxGraph的mxCell和Styles样式(graph style)

3.1.3mxCell[翻译]mxCell是顶点和边的单元对象。mxCell复制了模型中可用的许多功能。使用上的关键区别是,使用模型方法会创建适当的事件通知和撤销,而使用单元进行更改时没有更改记...

按钮重复点击:这“简单”问题,为何难住大半面试者与开发者?

在前端开发中,按钮重复点击是一个看似不起眼,实则非常普遍且容易引发线上事故的问题。想象一下:提交表单时,因为网络卡顿或手抖,重复点击导致后端创建了多条冗余数据…这些场景不仅影响用户体验,更可能造成实...