一、伪类

1、概念：

1.1、first-child伪类

1.2、超链接伪类

1.3、CSS类和伪类

1.4、其他伪类

二、伪元素

CSS中伪对象详解

:first-line 伪对象

:first-letter伪对象

:before伪对象

:after伪对象

一、伪类

1、概念：

CSS伪类（Pseudo-classes）用于定义元素的特殊状态，用来添加一些选择器的特殊效果。下面我们分四种了解伪类，分别是first-child伪类、超链接伪类、CSS类和伪类、其他伪类。

1.1、first-child伪类

概念：first-child 伪类来选择父元素的第一个子元素，选择器匹配作为任何元素的第一个子元素的 <p> 元素。

语法：子元素（选择器）+ 空格 + first-child + {定义的样式}；

看看下面的例子

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类 伪元素</title><style>h4:first-child{color: olivedrab;}</style>
</head>
<body><h4>我是html父标签的第一个元素，且为h4标签，所以我是变绿了</h4><h4>我是html标签的第二个元素，所以我不变色</h4><hr><div><h4>我是第一个div标签里的第一个元素，且为h4标签，所以我变绿了</h4><h4>我是第一个div标签里的第二个h4标签内容，所以我不变色</h4></div><hr><div> <p>我是第二个div标签里的第一个元素，但是我是p标签，所以我不变色</p><h4>我是第二个div标签里的第一个h4标签，但我不是div的第一个元素，所以我不变色</h4></div></body>
</html>

运行结果：

代码解析：

（1）通过观察代码得知first-child伪类是放在sytle标签里的，再看看运行结果的“自述”，我们可以得出结论：first-child伪类的实现，需要满足2个条件，条件1是子元素必须是first-child规定的元素，条件2是子元素必须是父元素的第一个（first）元素，只有2个条件同时满足，first-child伪类便会实现。

（2）div标签

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。<div> 元素经常与 CSS 一起使用，用来布局网页。

例如百度页面中有很不同的内容，有导航栏、logo标题、推荐内容、百度热搜等，这些不同区域的内容都可以使用 div 分隔，再使用 css 样式对其进行排版，使其在页面中“摆放”在不同位置。div 间的关系有并列有嵌套，嵌套可以一套一也可以一套多。

1.2、超链接伪类

在支持 CSS 的浏览器中，用超链接伪类实现链接的不同状态以不同的方式显示，例如设置超链接未被访问时的颜色、已访问时的颜色、鼠标滑过时的颜色、选中后的颜色。未访问颜色的设置使用 link 伪类、已访问使用visited、鼠标滑过使用hover、已选中使用active。

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接伪类</title><style>/* 未访问的链接,显示黑色 */a:link {color:black;}/* 已访问的链接，显示灰色*/a:visited {color:gray;}/* 鼠标悬停链接，显示绿色 */a:hover {color:olivedrab;}/* 已选择的链接，显示橙色 */a:active {color:orange;}</style>
</head>
<body><a href="http://csdn.com">我是链接一</a><br><a href="http://www.w3school.com">我是链接二</a>
</body>
</html>

运行结果：

未访问时，两个链接都是黑色

访问过后，链接显示灰色

鼠标悬停时，链接字体变绿色，点击时变橙色（一闪而过）

代码解析：

未访问链接字体颜色命名为 link 、已访问链接字体颜色命名为visited、鼠标滑过时链接字体颜色命名为hover、已选中链接字体颜色命名为active，对链接进行不同操作，显示不同颜色。

使用超链接伪类使得制作出来的页面更加精美，需要注意 hover 必须写再 link 和 visited 之后，active 必须放在 hover 之后，否则无法生效。

1.3、CSS类和伪类

结合之前学过二点CSS类，伪类可以与 CSS 类配合使用。

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS类和伪类配合使用</title><style>.highlight{color: #ff0000;}</style>
</head>
<body><h4 class="highlight">我使用了类样式，所以生效了</h4><h4 >我没有使用类样式，所以不生效</h4>
</body>
</html>

运行结果：

代码解析：当元素h4调用CSS类highlight时，样式生效，如果使用伪类就不需要调用，伪类是提前定义好的。

还可以直接使用类名进行调用

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS类和伪类配合使用</title><style>h4.highlight:first-child{color: #ff0000;}</style>
</head>
<body><h4 class="highlight">我使用了指定类对某标签生效，所以生效了</h4><h4 >我没有使用指定类对某标签生效，所以不生效</h4>
</body>
</html>

运行结果：

代码解析：

上面的代码使用了指定类对某标签生效，体现在

h4.highlight:first-child{
color: #ff0000;
}

就是再伪类基础h4.:first-child加个类名h4.highlight:first-child,调用时和类一样用类名。

1.4、其他伪类

通过三个例子了解：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>其它伪类</title><style>ul li:first-child{color:green;}p a:last-child{color:hotpink;}div p span:first-child{color:yellow}</style>
</head>
<body><b>例子一：</b><ul><li>第一项值</li><li>第二项值</li><li>第三项值</li></ul><ul><li>第一项值</li><li>第二项值</li><li>第三项值</li></ul><hr><b>例子二：</b><p>我是p标签</p><p>我是 p 元素内容<br><a href="http://www.csdn.com">这是 p 元素下的 a 标签1</a><br><a href="http://www.baidu.com">这是 p 元素下的 a 标签2</a><br><a href="http://www.taobao.com">这是 p 元素下的 a 标签3</a></p><hr><b>例子三：</b><div><p>p1内容<span>span内容1</span><span>span内容2</span>p1内容</p><p>p2内容<span>span内容3</span>p2内容</p></div>
</body>
</html>

运行结果：

代码解析：

定义了3种伪类，分别是ul li:first-child{color:green;}、 p a:last-child{color:hotpink;}和div p span:first-child{color:yellow;}，其中：

first-child------表示父元素指定的第一个子元素，前面介绍过了。

last-child------表示父元素指定的最后一个子元素，语法格式和first-child一样都是父元素+空格+子元素

ul li:first-child{color:green;}--------表示ul标签里的第一个元素是li标签时，li标签使用该样式。

p a:last-child{color:hotpink;}-------表示p标签里的第一个元素是a标签时，a标签使用该样式。

div p span:first-child{color:yellow;}-表示div标签里的第一个元素是lp标签,并且p标签的第一个元素是span标签时，span标签使用该样式。

二、伪元素

概念：参考自：百度百科

CSS 伪元素用于设置元素指定部分的样式。伪对象语言创造的元素不存在在DOM文档中，是虚拟的元素。伪元素代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

伪对象用于将特殊的效果添加到某些选择器。

语法规制为：选择器 :: 伪元素{属性：值}

CSS中的伪对象如下表：

伪元素	说明
:after	与content属性一起使用，定义在对象后的内容
:before	与content属性一起使用，定义在对象前的内容
:first-letter	定义对象内第一个字符的样式
:first-line	定义对象内第一行的样式

content 就是文本属性，与:before 及 :after 伪元素配合使用，来插入生成内容。

content的其他用法可以参考：CSS content 属性 | 菜鸟教程

CSS中伪对象详解

:first-line 伪对象

" first-line"伪元素用于向某个选择器中的文字的首行添加特殊样式。

first-line伪元素仅能被用于块级元素。下面的属性可以被应用到first-line伪元素：

font 属性、color属性、background属性、word-spacing（词间距）、letter-spacing（字母间距）、text-decoration（文本修饰）、vertical-align（垂直对齐）、text-transform（文本转换）、line-height（行高）。

让我们举个例子更好理解。

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p::first-line{color:blue;font-size:20px;}</style>
</head>
<body><!--first-line伪对象--><p>我是p1第一行<br>我是p1第二行<br>我是p1第三行<br></p><p>我是p2第一行阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长</p></body>
</html>

运行结果：

代码解析：

first-line在上面的例子中，浏览器显示根据first-line伪元素格式化的第一行。浏览器是依靠浏览器窗口的尺寸来进行分行的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p::first-line{color:blue;font-size:20px;}P::first-letter{color:brown}P::before{content:"我是前方增加的文字--你好，";color:darkgreen}P::after{content:" 虎年大吉--我是后面增加的文字";color: fuchsia;}</style>
</head>
<body><p>2022</p><p>2022<br>2022<br>2022<br></p><p>我是p2第一行阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长</p></body>
</html>

运行结果：

代码解析：

在原本P元素的内容前都加了“我是前方的文字--你好，”在原本P元素的内容后都加了“虎年大吉--我是后面的文字”，P元素的第一行都变成蓝色，P元素的第一个字母都变成红色。

拓张资料：

（1）DOM文档：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。

DOM 定义了访问 HTML 和 XML 文档的标准：

（2）文档树：这里指的是HTML DOM 节点树，HTML的结构是一个树状结构，在内存中形成一棵树，因此叫文档树。

第四篇 HTML5 伪类与伪元素相关推荐

【第四篇】CSS选择器之伪类选择器
利用组合选择器虽然可以选择子类和兄弟元素,但是无法做到特殊的选择.例如无法选择第几个子类,或者和其同标签的兄弟元素.为此CSS诞生了伪类选择器,用来进行更加灵活的元素选择. 伪类选择器伪类选择器根据 ...
html5复合选择器,web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）...
参考文档:https://man.ilovefishc.com/css3/ 一.基本选择器: 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样 ...
CSS中的伪类和伪元素（详细）
这篇想要跟大家分享的是css中的伪类和伪元素,有任何问题可以私聊我或者评论哦! 首先,我们先来想一下一.引入伪类跟伪元素的原因? 伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述比如CSS ...
伪类和伪元素的区别，以及伪元素的妙用（上）
伪类到底是什么呢,与伪元素又有啥关联呢小白程序员-博客第二篇说到伪类和伪元素呢,这里可能就跟读者们唠叨一下啦,伪类和伪元素到底有什么渊源呢,上面文章说到伪元素可以清除浮动,其实呀,伪元素的功能不止 ...
CSS 伪类与伪元素
CSS的元素选择器除了根据id(#).class(.).属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素.它们就是伪类和伪元素.跟id选择器.类选择器.属性选择器以及派生 ...
java的string访问某个元素_CSS伪类与伪元素总是傻傻分不清，这份总结够面试用了
熟悉前端的人都会听过 css 的伪类与伪元素,然而大多数的人都会将这两者混淆.本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面 ...
十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition
七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...
CSS伪类（伪类选择器）
伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就是属于box类.但是a属于什 ...
html中伪类定义,伪类
本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 伪类对元素进行分类是基于特征(characteristics)而不是它们的名字.属性或者内容:原则上特征是不可以从文档树上推断 ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类
小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/top ...

第四篇 HTML5 伪类与伪元素

一、伪类

1、概念：

1.1、first-child伪类

1.2、超链接伪类

1.3、CSS类和伪类

1.4、其他伪类

二、伪元素

CSS中伪对象详解

:first-line 伪对象

:first-letter伪对象

:before伪对象

:after伪对象

第四篇 HTML5 伪类与伪元素相关推荐

最新文章

热门文章