CSS 伪类(Pseudo-classes)

最新推荐文章于 2023-07-13 12:03:39 发布
最新推荐文章于 2023-07-13 12:03:39 发布
阅读量1.1w 收藏
点赞数 1
文章标签： CSS
本文链接：https://blog.csdn.net/InJavaWeTrust/article/details/101063557
版权

CSS 伪类(Pseudo-classes)

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

语法

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

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


 

anchor伪类

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

<!DOCTYPE html>
<html>
<head>
<title>test</title> 
<style>
a:link {color:#FF0000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="http://injavawetrust.iteye.com" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

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

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

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

伪类和CSS类

伪类可以与 CSS 类配合使用：

a.red:visited {color:#FF0000;}

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

如果在上面的例子的链接已被访问，它会显示为红色。

CSS - :first - child伪类

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

匹配第一个 <p> 元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：

<!DOCTYPE html>
<html>
<head>
<title>test</title> 
<style>
p:first-child
{
	color:blue;
} 
</style>
</head>

<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经声明.</p>
</body>
</html>

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

在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：

<!DOCTYPE html>
<html>
<head>
<title>test</title> 
<style>
p > i:first-child
{
	color:blue;
} 
</style>
</head>

<body>
<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>
<p><b>注意:</b> 当 :first-child 作用于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经定义.</p>
</body>
</html>

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

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

<!DOCTYPE html>
<html>
<head>
<title>test</title> 
<style>
p:first-child i
{
	color:blue;
} 
</style>
</head>

<body>
<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>
<p><b>注意:</b> 当:first-child 作用于 IE8 及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
</body>
</html>

CSS - :lang 伪类

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

在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：

<!DOCTYPE html>
<html>
<head>
<title>test</title> 
<style>
q:lang(no)
{
	quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p>
</body>
</html>

所有CSS伪类/元素

选择器示例示例说明
:checkedinput:checked选择所有选中的表单元素
:disabledinput:disabled选择所有禁用的表单元素
:emptyp:empty选择所有没有子元素的p元素
:enabledinput:enabled选择所有启用的表单元素
:first-of-typep:first-of-type选择每个父元素是p元素的第一个p子元素
:in-rangeinput:in-range选择元素指定范围内的值
:invalidinput:invalid选择所有无效的元素
:last-childp:last-child选择所有p元素的最后一个子元素
:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个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元素倒数的第二个为p的子元素
:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素
:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素
:only-childp:only-child选择所有仅有一个子元素的p元素
:optionalinput:optional选择没有"required"的元素属性
:out-of-ranginput:out-of-range选择指定范围以外的值的元素属性
:read-onlyinput:read-only选择只读属性的元素属性
:read-writeinput:read-write选择没有只读属性的元素属性
:requiredinput:required选择有"required"属性指定的元素属性
:rootroot选择文档的根元素
:target#news:target选择当前活动#news元素(点击URL包含锚的名字)
:validinput:valid选择所有有效值的属性
:linka:link选择所有未访问链接
:visiteda:visited选择所有访问过的链接
:activea:active选择正在活动链接
:hovera:hover把鼠标放在链接上的状态
:focusinput:focus选择元素输入后具有焦点
:first-letterp:first-letter选择每个<p> 元素的第一个字母
:first-linep:first-line选择每个<p> 元素的第一行
:first-childp:first-child选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:beforep:before在每个<p>元素之前插入内容
:afterp:after在每个<p>元素之后插入内容
:lang(language)p:lang(it)为<p>元素的lang属性选择一个开始值

      

 

 

 

 

 

托马斯小火车喷雾又喷烟，一直喷，喷喷喷.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS进阶篇——伪类 (pseudo classes)
老梁的专栏
09-29 590
伪类（pseudo classes）要和选择器捆绑使用，用于表示某种状态（state）或关系（relation）。它的形式是「选择器:冒号:伪类」。
CSS ：伪类(Pseudo-classes)
weixin_43731793的博客
06-10 256
1、简介 CSS伪类是用来添加一些选择器的特殊效果。 2、实例 a:link {color:#FF0000;}/* 未访问的链接 / a:visited {color:#00FF00;}/ 已访问的链接 / a:hover {color:#FF00FF;}/ 鼠标划过链接 / a:active {color:#0000FF;}/ 已选中的链接 */ 注意： 在CSS定义中，a:hover 必须被置...
伪类(pseudo-classes)
Lonelydesertea的博客
12-07 395
■常见的伪类有 □动态伪类(dynamic pseudo-classes) □结构伪类(structural pseudo-classes) √:link、visited、：hover、：active、：focus √:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type() □目标伪类（target pseudo-classes） √...
CSS伪类(pseudo class)简明介绍之:before和:after
GBin1.com
04-27 1191
日期：2012-4-26  来源：GBin1.com 在线演示  本地下载  在线调试 如果大家经常关注互联网新网站和应用的话，或者你喜欢收集不同的网站模板，你会发现越来越多的网站模板或者网站在使用CSS伪类 - pseudo class。 今天我们这里给大家简单介绍伪类中经常使用的俩个:before和:after。希望大家能够觉得有帮助！ 如果你喜欢我们的文章，或者有任何问
CSS 伪类 (Pseudo-classes)
06-01 73
 CSS 伪类用于向某些选择器添加特殊的效果。 CSS 伪类 (Pseudo-classes)实例： 超链接本例演示如何向文档中的超链接添加不同的颜色。超链接 2本例演示如何向超链接添加其他样式。超链接 - :focus 的使用本例演示如何对超链接应用 :focus 伪类（无法在 IE 中工作）。:first-child（首个子对象）本例演示 :first-child 伪类的用法。:
Opdracht-012---CSS-Pseudo-classes
03-16
【标题】"Opdracht-012---CSS-Pseudo-classes"是一个关于CSS伪类的练习任务。在网页设计中，CSS（层叠样式表）是用于控制网页元素外观的关键技术之一。伪类是CSS中一个特殊的概念，它允许我们针对元素的不同状态或...
map-pseudo-classes:使用 JS map() 实现 CSS psuedo-classes
05-31
映射伪类使用 JS map() 实现 CSS psuedo-classes 这些示例演示了如何使用map()模拟伪类。 使用 React.js，使用内联样式变得流行起来。 在示例目录中有一些组件，它们演示了如何在没有 CSS 的情况下重现某些pseude-...
前端开源库-pseudo-classes.zip
10-05
在前端开发中，伪类（Pseudo-classes）是CSS中的一个重要概念，它们允许我们根据元素的状态或位置来定义不同的样式。在这个名为“前端开源库-pseudo-classes.zip”的压缩包中，很可能是包含了关于如何在各种开源前端...
css伪类（Pseudo-classes）
weixin_30614109的博客
10-21 61
简介：伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: value; }，简单地用一个半角英文冒号（:）来隔开选择符和伪类。CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类。 :link用在未访问的连接上。 :visited用在已经访问过的连接上。 :...
伪类 (Pseudo-classes)
ANGWH的博客
11-24 390
CSS 伪类用于向某些选择器添加特殊的效果。 常见的CSS伪类 :active 向被激活的元素添加样式。 :focus 向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 :link 向未被访问的链接添加样式。 :visited 向已被访问的链接添加样式。 :first-child 向元素的第一个子元素添加样式。 :lang ...
第十九课--伪类(Pseudo-classes)
阅读之后，对你有帮助，那就点个赞再走吧
08-12 278
a. 伪类是用来添加一些选择器的特殊效果 b.anchor伪类--链接的不同状态都可以以不同的方式显示 a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选...
CSS 选择器 - Pseudo-classes
u013275171的专栏
11-25 472
伪选择器，此选择器不选择网页元素，但却是网页元素的一部分，或者说是网页元素所处于的某一环境、或者某一状态。 Pseudo-classes 伪类是使用 ':' 连接于选择器之后的关键字。 :active 此伪类匹配被用户激活的元素。此伪类会被后声明的(:link, :hover, :visited)覆盖。为了正常加上此伪类样式，应当以 LVHA 顺序添加。:link - :visited ...
CSS Pseudo-classes & Pseudo-elements
u013960094的专栏
04-28 2326
Pseudo-classes used to add special effects to some selectors. 用于给一些选择器
CSS伪类(Pseudo-classes)、伪元素、伪类选择器
Z_CH8648的博客
11-26 928
伪类是添加到选择器上的关键字，指定元素的特殊状态，伪类可以根据内容的状态来应用不同的样式； 伪元素是通过样式来对指定的元素添加一个用CSS写的子元素；
试试讲明白pseudo-classes和pseudo-elements
weixin_33777877的博客
05-23 465
introduction 最近在看基础，发现对伪类和伪元素的概念并不理解的透彻，而普通百度的文章都是写者自己的理解，因此觉得还不如直接阅读文档规范来的准确，下面就是今天的所得。 本文章主要用来解决下面几个问题： 什么是pseudo classes 和 pseudo elements? pseudo classes 和pseudo elements 两者的差别是什么？ 两者的实际应用是什么？开发中...
面试题更新之-伪元素和伪类
肥晨开发的学习之路
07-13 505
强化结构化选择：伪类可以基于元素在其父元素中的位置来选择，如:first-child、:last-child、:nth-child(n)等。例如，通过::before或::after选择器，可以为元素的内容前后插入修饰性的元素，并对其进行样式定制，以美化页面布局和设计。伪类可以应用于元素的不同状态，如:hover可以应用于鼠标悬停时的状态，:nth-child(n)可以选择父元素的第n个子元素。伪元素通常只能应用于元素的一部分，如::before和::after只能作用于元素的内容周围。
浅谈class选择器（伪类） & 伪元素
qq_41930094的博客
01-06 1007
1.伪类 概念：伪类属于选择器的一种，可简洁代码操作元素实现某项功能，无需担心后续 “售后”。 表现形式： 一般前缀使用 ：（冒号）开头 案例体现： 将文章第一段落，改变样式，原始做法就是给其设定class后，对应位置设置样式，但是一旦段落变化，需要手动将之前定义的class换位置…而此时，如果我们使用伪类 ：first-child就是另一番景象了… 用户行为 · 伪类 :hover 一般用于pc电脑端， 而相对应移动端使用：action * 前者，鼠标移动触发效果，后者用户点击后触发效果… :fo
 css伪类与伪元素
最新发布
03-19
1. 伪类（Pseudo-classes）： - 伪类用于选择处于特定状态的元素，例如鼠标悬停、被点击、被选中等。 - 一些常见的伪类包括：`:hover`（鼠标悬停）、`:active`（被点击）、`:visited`（被访问过）、`:focus`（获得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值