总结常用伪类与伪元素

栏目: CSS · 发布时间: 5年前

内容简介：伪类和伪元素是为了格式化 DOM 树以外的信息而被引入的。一个 CSS 伪类是以一个冒号(:)作为前缀，被添加到一个选择器末尾的关键字，可以让指定的元素在特定的状态呈现指定的样式。例如 :hover，当用户悬停在指定元素时，可以在这个状态给指定元素添加相应的样式，是在 DOM 树无法描述的状态下才能给元素添加样式。首先，睡觉的小喵咪上方是一些没有亮的一些小灯泡

总结常用伪类与伪元素

伪类和伪元素是为了格式化 DOM 树以外的信息而被引入的。

伪类

一个 CSS 伪类是以一个冒号(:)作为前缀，被添加到一个选择器末尾的关键字，可以让指定的元素在特定的状态呈现指定的样式。例如 :hover，当用户悬停在指定元素时，可以在这个状态给指定元素添加相应的样式，是在 DOM 树无法描述的状态下才能给元素添加样式。

首先，睡觉的小喵咪上方是一些没有亮的一些小灯泡

总结常用伪类与伪元素

:first-child

:first-child 表示在一组兄弟元素中的第一个元素。

:first-child 没有办法点亮小灯泡

<div class="bulb-lists">
  <p>.bulb 的兄弟元素</p>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
</div>

.bulb:first-child {
  background-image: url('../assets/img/light.png')!important;
}

:first-child 点亮第一个小灯泡

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
</div>

.bulb:first-child {
  background-image: url('../assets/img/light.png')!important;
}

总结常用伪类与伪元素

:first-of-type

:first-of-type 表示一组兄弟元素中 指定类型 的第一个元素。

:first-of-type 选择在父元素中第一个出现的 .bulb，而不管其在兄弟内的位置如何，点亮第一个小灯泡

<div class="bulb-lists">
  <p>.bulb 的兄弟元素</p>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
</div>

.bulb:first-of-type {
  background-image: url('../assets/img/light.png')!important;
}

总结常用伪类与伪元素

:last-child

:last-child 表示在一组兄弟元素中的最后一个元素(类似:first-child)。

点亮最后一个小灯泡

总结常用伪类与伪元素

:last-of-type

:last-of-type 表示一组兄弟元素中 指定类型 的最后一个元素(类似:first-of-type)。

点亮最后一个小灯泡

:not

一个否定伪类，用于匹配不符合参数选择器的元素。

/* 点亮不含有 .not 的灯泡*/
 <div class="bulb-lists">
  <div class="bulb not"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb not"></div>
</div>

.bulb:not(.not) {
  background-image: url('../assets/img/light.png')!important;
}

总结常用伪类与伪元素

:nth-child(an+b)

:nth-child 这个 CSS 伪类 首先会找到当前元素的兄弟元素 ，然后按照位置的先后顺序从1开始排序，选择的结果为第（an+b）个元素的集合（n=0，1，2，3...）。如果 an+b 为 0，无法选中任何元素。

  1. :nth-child(4) 匹配位置为 4 的元素 
/*点亮了第三个灯泡，因为第三个灯泡在所有兄弟元素中排第4*/
 <div class="bulb-lists">
  <p>.bulb 的兄弟元素</p>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
 </div>

.bulb:nth-child(4){
  background-image: url('../assets/img/light.png')!important;
}

效果：

总结常用伪类与伪元素

2. :nth-child(2n) 匹配位置为 2、4、6、8...的元素，可以使用 :nth-child(even) 代替。 

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
</div>

.bulb:nth-child(2n){
  background-image: url('../assets/img/light.png')!important;
}

效果：

总结常用伪类与伪元素

3. :nth-child(2n+1) 匹配位置为 1、3、5、7...的元素，可以使用 :nth-child(odd) 代替。 

.bulb:nth-child(2n+1){
  background-image: url('../assets/img/light.png')!important;
}

效果：

总结常用伪类与伪元素

4. :nth-child(3n) 匹配位置为 3、6、9...的元素。 

.bulb:nth-child(3n){
  background-image: url('../assets/img/light.png')!important;
}

效果

总结常用伪类与伪元素

:nth-of-type(an+b)

:nth-of-type 与 nth-child 相似，不同之处在于它是只匹配 特定类型 的元素。 

<div class="bulb-lists">
  <p>.bulb 的兄弟元素 这是一个 p 标签</p>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
 </div>
.bulb:nth-of-type(4){
  background-image: url('../assets/img/light.png')!important;
}

效果：

总结常用伪类与伪元素

:nth-last-child(an+b)

:nth-last-child 与nth-child相似，它是从最后一个子元素开始计数的。 

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>.bulb 的兄弟元素 这是一个 p 标签</p>
</div>
.bulb:nth-last-child(4){
  background-image: url('../assets/img/light.png')!important;
}

总结常用伪类与伪元素

:nth-last-type

:nth-last-of-type 与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的。 

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>.bulb 的兄弟元素 这是一个 p 标签</p>
</div>

.bulb:nth-last-type(4){
  background-image: url('../assets/img/light.png')!important;
}

总结常用伪类与伪元素

伪元素

伪元素的前缀是两个冒号 (::) ， 同样是添加到选择器后面去选择某个元素的某个部分。伪元素创建了不存在 DOM 树中的元素，并为其添加样式。例如，::after 选择元素后，在其内容后使用 content 添加内容。虽然可以看到添加的内容，但是这些内容实际上不存在 DOM 树中。

::after(:after)

使用 ::after 会创建一个伪元素，该伪元素会成为选中元素的最后一个子元素 

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>哇塞，好亮呀！</p>
</div>

p::after{
    content: ':sparkles::sparkles::sparkles:'
}

效果图：

总结常用伪类与伪元素

::before(:before)

使用 ::before 会创建一个伪元素，该伪元素会成为选中元素的最后一个子元素 

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>哇塞，好亮呀！</p>
</div>

p::before{
    content: ':star2::star2::star2:'
}

效果图：

总结常用伪类与伪元素

::first-letter（:first-letter）

::first-letter 选中某块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容。 

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>哇塞，好亮呀！</p>
</div>

p::first-letter{
    color: #ffeb3b;
}

效果图：

总结常用伪类与伪元素

::first-line (:first-line)

::first-line 在某块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的html元素。::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用。 

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>哇塞，好亮呀！<br>第二行</p>
</div>

p::first-line{
    color: #ffeb3b;
}

效果图：

总结常用伪类与伪元素

::selection

::selection 用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

p::selection {
  background-color: #ffeb3b;
}

使用鼠标选中亮字，效果图

总结常用伪类与伪元素

参考文档：


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
UX设计之道

UX设计之道

[美]Russ Unger、[美]Carolyn Chandler / 陈军亮 / 人民邮电出版社 / 2015-4-1 / 49.00元

本书的目标是提供一些基本的工具及应用场景，帮助你及工作团队一起来使用这些工具和方法。正如你将在本书很多章节中看到的那样，我们没有尝试包罗万象、迎和所有的人，但我们试图给你提供一些用户体验（UX）设计师需要具备的核心信息和知识。除了我们自己的案例外，我们还提供了一些帮你了解如何开始准备基本材料的案例，让你可综合这些信息来创建某些更新、更好或者是更适合自己意图的东西。一起来看看 《UX设计之道》 这本书的介绍吧!

码农工具
HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

html转js在线工具
html转js在线工具

html转js在线工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3