跳至主要內容

伪类和伪元素

Mr.Tommya大约 10 分钟CSScss伪元素伪类

伪类和伪元素

这篇想要跟大家分享的是 css 中的伪类和伪元素，有任何问题可以私聊我或者评论哦！

首先，我们先来想一下

一、引入伪类跟伪元素的原因？

伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述

比如 CSS 没有 “段落的第一行”、“文章首字母” 之类的选择器，而这在一些出版场景里又是必须的，因此引入。

引用标准中的话：

(CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。)
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on 
information that lies outside the document tree.

二、什么是伪类，伪元素？

1、伪类

**概念：**为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。

它可以用于

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

2、伪元素

**概念：**创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作, 虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)

它可以用于

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

三、伪类

分类

  • 状态伪类
  • 结构性伪类

1、状态伪类：基于元素当前状态进行选择的

元素的样式会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

常见的状态伪类

:link 应用于未被访问过的链接；

:hover 应用于鼠标悬停到的元素；

:active 应用于被激活的元素；

:visited 应用于被访问过的链接，与: link 互斥。

:focus 应用于拥有键盘输入焦点的元素。

实例

<!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 类

当您将鼠标悬停在类 highlight 上时，会改变颜色：

a.highlight:hover {
  color: red;
}

悬停在 <div 上

div:hover {
  background-color: blue;
}

把鼠标悬停到 <div 元素以显示 <h1 元素（类似工具提示的效果）

h1 {
  display: none;
  background-color: green;
  padding: 25px;
}
 
div:hover h1 {
  display: block;
}

2、结构性伪类：css3 新增选择器

利用 dom 树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少 class 和 id 属性的定义，使文档结构更简洁。

常见的结构性伪类

  1. :first-child 选择某个元素的第一个子元素；
  2. :last-child 选择某个元素的最后一个子元素；
  3. :nth-child(n) 匹配属于其父元素的第 n 个子元素，不论元素的类型；
  4. :nth-last-child() 从这个元素的最后一个子元素开始算, 选匹配属于其父元素的第 n 个子元素，不论元素的类型；
  5. :nth-of-type() 规定属于其父元素的第 n 个 指定 元素；
  6. :nth-last-of-type() 从元素的最后一个开始计算, 规定属于其父元素的指定 元素；
  7. :first-of-type 选择一个上级元素下的第一个同类子元素；
  8. :last-of-type 选择一个上级元素的最后一个同类子元素；
  9. :only-child 选择它的父元素的唯一一个子元素；
  10. :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
  11. :checked 匹配被选中的 input 元素，这个 input 元素包括 radio 和 checkbox。
  12. :empty 选择的元素里面没有任何内容。
  13. :disabled 匹配禁用的表单元素。
  14. :enabled 匹配没有设置 disabled 属性的表单元素。
  15. :valid 匹配条件验证正确的表单元素。
  16. :in-range 选择具有指定范围内的值的 <input 元素。
  17. :optional 选择不带 "required" 属性的 <input 元素。
  18. :focus 选择获得焦点的 <input 元素。

实例

选择器匹配 p 元素的第一个子元素：

p:first-child {
  color: red;
}
<p你好</p
<p好啊</p

匹配所有 <p 元素中的首个 <i 元素:

p i:first-child {
  color: blue;
}
 
<p我是一个<i强壮</i的男人。我是一个<i强壮</i的男人。</p
 
<p我是一个<i强壮</i的男人。我是一个<i强壮</i的男人。</p

段落 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

lang="en" 的 q 元素定义~：

q:lang(en) {
  quotes: "~" "~";
}
 
<pSome text <q lang="en"A quote in a paragraph</q Some text.</p

选择获得焦点的 <input 元素 (点击输入框，背景颜色变为黄色）:

input:focus {
  background-color: yellow;
}
  First name: <input type="text" <br
  Last name: <input type="text" <br

四、伪元素

所有的伪元素

选择器例子例子描述
::afterp::after在每个 <p> 元素之后插入内容。
::beforep::before在每个 <p> 元素之前插入内容。
::first-letterp::first-letter选择每个 <p> 元素的首字母。
::first-linep::first-line选择每个 <p> 元素的首行。
::selectionp::selection选择用户选择的元素部分。

注意：

CSS3 规范中有一部分要求，为了区分伪类和伪元素，伪元素使用两个冒号 (:😃， 伪类使用一个冒号 (😃

对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ，::before 作用是一样的，所以，如果网站只需要兼容 webkit、firefox、opera 等浏览器，伪元素建议采用双冒号的写法，如果是要兼容 IE 浏览器，建议用 CSS2 的单冒号写法。

实例

为所有 <p 元素中的首行添加样式：

p::first-line {
  color: #ff0000;
  font-size:16px;
}

在这里对于::first-line, 我们需要注意，::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

设置所有 <p 元素中文本的首字母格式：

p::first-letter {
  color: red;
  font-size: 16px;
}

在这里对于::first-letter , 我们需要注意，::first-letter  伪元素只能应用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • 外边距属性
  • 内边距属性
  • 边框属性
  • text-decoration
  • vertical-align（仅当 "float" 为 "none"）
  • text-transform
  • line-height
  • float
  • clear

在这里要对::before 和::after, 做个讲解

在元素的 ::before 和 ::after 中插入内容 -content 属性（如果没有写 content 样式，伪元素会失效）

<table<tbody<tr<th默认值：</th<tdnormal</td</tr<tr<th继承：</th<tdno</td</tr<tr<th版本：</th<tdCSS2</td</tr<tr<thJavaScript 语法：</th<td<emobject</em.style.content="url(beep.wav)"</td</tr</tbody</table

contnt 属性的类别：

<table<tbody<tr<tdnone</td<td设置 content 为空值。</td</tr<tr<tdnormal</td<td在 :before 和 :after 伪类元素中会被视为 none，即也是空值。</td</tr<tr<tdcounter</td<td设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由 style 指定（默认是'decimal'——十进制数字）</td</tr<tr<tdattr<em(attribute)</em</td<td将元素的 attribute 属性以字符串形式返回。。</td</tr<tr<td<emstring</em</td<td设置文本内容</td</tr<tr<tdopen-quote</td<td设置前引号</td</tr<tr<tdclose-quote</td<td设置后引号</td</tr<tr<tdno-open-quote</td<td移除内容的开始引号</td</tr<tr<tdno-close-quote</td<td移除内容的闭合引号</td</tr<tr<tdurl(<emurl</em)</td<td设置某种媒体（图像，声音，视频等内容）的链接地址</td</tr<tr<tdinherit</td<td指定的 content 属性的值，应该从父元素继承</td</tr</tbody</table

在每个 <h1 元素的内容之前插入一幅图：

h1::before {
  content: url();
}

在每个 <h1 元素的内容之后插入一幅图像：

h1::after {
  content: url();
}

使所选文本在蓝色背景上显示为红色：

::selection {
  color: red; 
  background:blue;
}

可以应用于 ::selection：的属性

  • color
  • background
  • cursor
  • outline

伪元素与 CSS 类结合使用：(将以粉色和较大的字体显示 的段落的首字母。)

p.name::first-letter {
  color: hotpink;
  font-size: 200%;
}  
 
<p class="name"你好漂亮！</p

五、伪类和伪元素的应用

1、画分割线

效果如图

<style
/*content没有内容也一定要记得写*/
    .line::before, .line::after {
      content: '';
      display: inline-block;
      width: 300px;
      border-top: 1px solid black;
      margin: 5px;
    }
  </style
</head
<body
  <p class="line"此处为分割线</p
</body

2、清除浮动

这里将会在下一次分享 “浮动” 时去分享

其他应用也会在后续的使用中，不断发现，不断补充

最后！

关于代码只粘贴了主要代码，其他的内容，需要读者自己进行补充

下次见！

Mr.Tommya
Copyright © 2024 Mr.Tommya