总结常用伪类与伪元素

anRui 发布于2019-08-30 10:50 / 1611人阅读

摘要：总结常用伪类与伪元素伪类和伪元素是为了格式化树以外的信息而被引入的。伪类一个伪类是以一个冒号作为前缀，被添加到一个选择器末尾的关键字，可以让指定的元素在特定的状态呈现指定的样式。

总结常用伪类与伪元素

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

伪类

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

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

:first-child

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

/* :first-child 没有办法点亮小灯泡，因为此时选中的是第一个 p 标签 */


  .bulb 的兄弟元素
  
  
  
  
  
  
  
  


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

效果如下：

/* :first-child 点亮第一个小灯泡， 此时选中的是第一个 .bulb */

  
  
  
  
  
  
  
  


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

效果如下：

:first-of-type

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

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


  .bulb 的兄弟元素
  
  
  
  
  
  
  
  


.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 的灯泡*/
 
  
  
  
  
  
  
  
  


.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，无法选中任何元素。

:nth-child(4) 匹配位置为 4 的元素

  /*点亮了第三个灯泡，因为第三个灯泡在所有兄弟元素中排第4*/
 
  .bulb 的兄弟元素
  
  
  
  
  
  
  
  
 

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

效果如下：

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


  
  
  
  
  
  
  
  


.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 相似，不同之处在于它是只匹配特定类型的元素。

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

效果如下：

:nth-last-child(an+b)

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


  
  
  
  
  
  
  
  
  .bulb 的兄弟元素 这是一个 p 标签

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

:nth-last-type

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


  
  
  
  
  
  
  
  
  .bulb 的兄弟元素 这是一个 p 标签


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

伪元素

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

::after(:after)

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


  
  
  
  
  
  
  
  
  哇塞，好亮呀！


p::after{
    content: "✨✨✨"
}

效果如下：

::before(:before)

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


  
  
  
  
  
  
  
  
  哇塞，好亮呀！


p::before{
    content: "

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114601.html

谈谈css伪类与伪元素

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

Berwin 2019-08-01 18:04 评论0 收藏0
谈谈css伪类与伪元素

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

hedzr 2019-08-29 13:53 评论0 收藏0
伪类与伪元素

摘要：介绍伪类和伪元素是中很常见的两个概念，利用的好，能够很方便的实现一些特殊效果。伪类与伪元素由于用法相近，导致平时使用并不能很好的区分这两个概念。伪类伪类类似于，用于对已有元素增加特殊状态，比如等。伪元素伪元素包括。介绍伪类和伪元素是css中很常见的两个概念，利用的好，能够很方便的实现一些特殊效果。伪类与伪元素由于用法相近，导致平时使用并不能很好的区分这两个概念。伪类（pseudo-...

kamushin233 2019-08-28 18:30 评论0 收藏0
伪类与伪元素

摘要：一伪类伪类包含两种状态伪类伪类和结构性伪类。状态伪类是基于元素当前状态进行选择的。二伪元素伪元素是对元素中的特定内容进行操作，而不是描述状态。一、伪类伪类包含两种：状态伪类（UI 伪类）和结构性伪类。 (1)状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样...

ChanceWong 2019-08-30 15:55 评论0 收藏0