一、引入伪类跟伪元素的原因？
比如CSS没有“段落的第一行”、“文章首字母”之类的选择器，而这在一些出版场景里又是必须的，因此引入。
二、什么是伪类，伪元素？
1、伪类
概念：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。
2、伪元素
概念：创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)
三、伪类
结构性伪类
1、状态伪类：基于元素当前状态进行选择的
常见的状态伪类
实例
<!DOCTYPE html>
<html>
<head>
<style>
/* 未访问的链接 */
a:link {
color: red;
}
/* 已访问的链接 */
a:visited {
color: green;
}
/* 鼠标悬停链接 */
a:hover {
color: hotpink;
}
/* 已选择的链接*/
a:active {
color: blue;
}
</style>
</head>
<body>
<p><a href="">这是一个链接</a></p>
</body>
</html>注意：
- 这几个伪类同时出现在一个元素的操作上，顺序不能改变，否则很大程度上会产生紊乱，造成效果失效！
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效。 (意思是必须先写a:link 和 a:visited再写 :hover） a:active 必须在 CSS 定义中的 a:hover 之后才能生效。 (意思是必须先写a:hover再写 :active） - 另外伪类名称对大小写并不敏感
伪类和 CSS 类
a.highlight:hover {
color: red;
}2.悬停在 <div> 上
div:hover {
background-color: blue;
}3.把鼠标悬停到 <div> 元素以显示 <h1>元素（类似工具提示的效果）
h1 {
display: none;
background-color: green;
padding: 25px;
}
div:hover h1 {
display: block;
}2、结构性伪类：css3新增选择器
利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。
常见的结构性伪类
:first-child 选择某个元素的第一个子元素； :last-child 选择某个元素的最后一个子元素； :nth-child(n) 匹配属于其父元素的第 n个子元素，不论元素的类型； :nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素，不论元素的类型； :nth-of-type() 规定属于其父元素的第n个 指定 元素； :nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定 元素； :first-of-type 选择一个上级元素下的第一个同类子元素； :last-of-type 选择一个上级元素的最后一个同类子元素； :only-child 选择它的父元素的唯一一个子元素； :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素； :checked匹配被选中的input元素，这个input元素包括radio和checkbox。 :empty 选择的元素里面没有任何内容。 :disabled匹配禁用的表单元素。 :enabled匹配没有设置disabled属性的表单元素。 :valid匹配条件验证正确的表单元素。 :in-range选择具有指定范围内的值的 <input> 元素。 :optional选择不带 "required" 属性的 <input> 元素。 :focus选择获得焦点的 <input> 元素。
伪类和CSS
p:first-child {
color: red;
}
<p>你好</p>
<p>好啊</p>2.匹配所有 <p> 元素中的首个 <i> 元素:
p i:first-child {
color: blue;
}
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>3.段落2变成蓝色
语法解释：p:nth-child(3),P标签的父元素是body，body的第3个子元素是“段落2。”所以段落2”，颜色变成了蓝色
p:nth-child(3)
{
background:blue;
}
<body>
<h1>今天学习伪类和伪元素</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
在上一个代码中，如果p:nth-child(3)改为属p:nth-of-type(3) ，则意思为规定其父元素的第3个 p 元素，那么变蓝色的是段落3
q:lang(en) {
quotes: "~" "~";
}
<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>5.选择获得焦点的 <input> 元素(点击输入框，背景颜色变为黄色）:
input:focus {
background-color: yellow;
}
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>四、伪元素
所有的伪元素
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| ::after | p::after | 在每个 <p> 元素之后插入内容。 |
| ::before | p::before | 在每个 <p> 元素之前插入内容。 |
| ::first–letter | p::first–letter | 选择每个 <p> 元素的首字母。 |
| ::first–line | p::first–line | 选择每个 <p> 元素的首行。 |
| ::selection | p::selection | 选择用户选择的元素部分。 |
注意：
对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ，::before 作用是一样的，所以，如果网站只需要兼容 webkit、firefox、opera 等浏览器，伪元素建议采用双冒号的写法，如果是要兼容 IE 浏览器，建议用 CSS2 的单冒号写法。
为所有 <p> 元素中的首行添加样式：
p::first-line {
color: #ff0000;
font-size:16px;
}在这里对于::first–line,我们需要注意，::first-line 伪元素只能应用于块级元素。
p::first-letter {
color: red;
font-size: 16px;
}在这里对于::first-letter ,我们需要注意，::first-letter 伪元素只能应用于块级元素。
::before和::after比较
在元素的 ::before和 ::after中插入内容–content属性（如果没有写content样式，伪元素会失效）
| 默认值： | normal |
|---|---|
| 继承： | no |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.content=”url(beep.wav)” |
contnt属性的类别
| none | 设置 content 为空值。 |
| normal | 在 :before 和 :after 伪类元素中会被视为 none，即也是空值。 |
| counter | 设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是’decimal’——十进制数字） |
| attr(attribute) | 将元素的 attribute 属性以字符串形式返回。 |
| string | 设置文本内容 |
| open-quote | 设置前引号 |
| close-quote | 设置后引号 |
| no–open-quote | 移除内容的开始引号 |
| no–close-quote | 移除内容的闭合引号 |
| url(url) | 设置某种媒体（图像，声音，视频等内容）的链接地址 |
| inherit | 指定的 content 属性的值，应该从父元素继承 |
在每个 <h1> 元素的内容之前插入一幅图：
h1::before {
content: url();
}在每个 <h1> 元素的内容之后插入一幅图像：
h1::after {
content: url();
}::selection {
color: red;
background:blue;
}伪元素与 CSS 类结合使用：(将以粉色和较大的字体显示 class=”name” 的段落的首字母。)
p.name::first-letter {
color: hotpink;
font-size: 200%;
}
<p class="name">你好漂亮！</p>原文地址:https://blog.csdn.net/m0_66570642/article/details/131343603
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_15149.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
