CSS中的伪类和伪元素(详细)

这篇想要跟大家分享的是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: "~" "~";
}

<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>

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

input:focus {
  background-color: yellow;
}
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><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样式,伪元素会失效)

默认值: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;
}

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

  • color
  • background
  • cursor
  • outline

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

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、清除浮动

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

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

最后!

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

下次见!

<think>嗯,用户想了解CSS选择器的用法示例。首先,我需要回忆一下选择器的基本概念。根据引用里的信息,选择器是基于元素的状态或位置来选择元素,比如链接的访问状态或者鼠标悬停状态。用户可能需要常见的型以及它们的具体应用场景。 首先,我得整理常见的选择器,比如动态、结构、表单相关状态。每个别下有哪些具体的,比如:link、:visited、:hover这些属于动态,:first-child、:nth-child属于结构。然后需要为每个提供示例代码,这样用户能更直观地理解用法。 接下来要注意用户可能的需求层次。他们可能想知道的基础用法,比如如何改变链接颜色,或者更复杂的应用,比如隔行变色表格。此外,用户可能对伪元素的区别有疑问,虽然问题没直接提到,但引用里提到CSS3中使用双冒号表示伪元素,可能需要简单区分。 还要检查示例代码的正确性,确保语法正确,比如选择器前是否有空格,属性是否正确。比如:hover的示例中,是否在鼠标悬停时改变背景颜色。同时,需要确保引用的信息准确,比如引用[3]提到根据状态或位置选择,引用[4]提到的动态特性。 另外,用户的问题可能涉及实际应用,比如如何实现导航菜单的高亮效果,或者表单输入的反馈。这时候需要给出具体的场景示例,帮助用户将理论应用到实践中。例如,使用:focus来突出显示当前输入框,或者:checked来定制复选框样式。 还要考虑是否要提到兼容性问题,但根据引用内容,可能没有这方面的信息,所以暂时不涉及。最后,生成相关问题,引导用户进一步学习,比如性能优化或高级应用,这有助于他们深入探索。</think>### CSS选择器用法及示例详解 CSS选择器用于根据元素的**特定状态**或**结构位置**应用样式,能够增强页面的交互性动态效果。以下是常见分及具体用法: --- #### 一、动态选择器 1. **链接状态控制** - `:link`:未访问的链接 ```css a:link { color: blue; } ``` - `:visited`:已访问的链接 ```css a:visited { color: purple; } ``` - `:hover`:鼠标悬停时 ```css button:hover { background-color: #eee; } ``` - `:active`:激活状态(如点击瞬间) ```css a:active { font-weight: bold; } ``` 2. **焦点状态** `:focus` 用于表单元素获取焦点时: ```css input:focus { border: 2px solid orange; } ``` --- #### 二、结构选择器 1. **子元素定位** - `:first-child`:选择父元素的首个子元素 ```css ul li:first-child { color: red; } ``` - `:nth-child(n)`:选择第n个子元素 ```css tr:nth-child(2n) { background: #f5f5f5; } /* 隔行变色 */ ``` 2. **特殊位置匹配** `:not()` 反向选择不符合条件的元素: ```css div:not(.disabled) { opacity: 1; } ``` --- #### 三、表单相关 1. **输入验证** - `:valid` `:invalid` 校验输入合法性: ```css input:valid { border-color: green; } input:invalid { border-color: red; } ``` 2. **勾选状态** `:checked` 用于单选/复选框选中时: ```css input[type="checkbox"]:checked + label { font-weight: bold; } ``` --- #### 四、示例场景 1. **导航菜单交互** ```css .nav-item:hover { background: #f0f0f0; } .nav-item:active { transform: scale(0.98); } ``` 2. **表格隔行高亮** ```css tr:nth-child(odd) { background: #f8f8f8; } ``` 3. **自定义复选框** ```css input[type="checkbox"]:checked::after { content: "✓"; color: #2196F3; } ``` --- #### 五、注意事项 1. 选择器需与其他选择器组合使用(如 `a:hover`)。 2. 部分有顺序要求(如 `:link` → `:visited` → `:hover` → `:active`)[^4][^5]。 3. 伪元素的区别:描述状态(单冒号),伪元素创建虚拟元素(双冒号,如 `::before`)[^2]。 ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LyiRo_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值