CSS基础学习记录——伪类和伪元素

定义

伪类选择器:伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。(CSS3中的定义)

不存在与DOM树中的信息,如<a>标签的 :link、:visited、:hover、:focus、:active。这些信息不存在与DOM树结构中,只能通过CSS选择器来获取;

不能被常规CSS选择器获取到的信息,如:first-child,选择元素的第一个子元素,这个功能无法用常规选择器实现,但是可以用js实现,不过和:first-child相比实在是不简洁,且还需要DOM操作。又比如伪类:target,它的作用是匹配文档(页面)的URI中某个标志符的目标元素,例如我们可以通过如下代码来实现页面内的区域跳转。

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>

<p>点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p>

<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
:target
{
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}

伪元素选择器:伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的(可以理解为html源码)。比如:documen接口不提供访问元素内容的第一个字或者第一行的机制,而伪元素可以使开发者可以提取到这些信息。并且,一些伪元素可以使开发者获取到不存在于源文档中的内容(比如常见的::before,::after)。

两者区别

伪类和伪元素最大的区别就在于:

1、伪类是为了弥补CSS选择器的不足,提供更多获取文档信息的方法。

2、伪元素创建了一个虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容。另外,开发者还可以为伪元素定制样式。

3、可以结合使用伪类,而不能结合使用伪元素。

4、语法不同。CSS3后,将伪元素的语法定义成了::开头。

伪类伪元素一览表

伪类:

Selector Meaning CSS
:active 选择正在被激活的元素 1
:hover 选择被鼠标悬浮着元素 1
:link 选择未被访问的元素 1
:visited 选择已被访问的元素 1
:first-child 选择满足是其父元素的第一个子元素的元素 2
:lang 选择带有指定 lang 属性的元素 2
:focus 选择拥有键盘输入焦点的元素 2
:enable 选择每个已启动的元素 3
:disable 选择每个已禁止的元素 3
:checked 选择每个被选中的元素 3
:target 选择当前的锚点元素 3
:first-of-type 选择满足是其父元素的第一个某类型子元素的元素 3
:last-of-type 选择满足是其父元素的最后一个某类型子元素的元素 3
:only-of-type 选择满足是其父元素的唯一一个某类型子元素的元素 3
:nth-of-type(n) 选择满足是其父元素的第n个某类型子元素的元素 3
:nth-last-of-type(n) 选择满足是其父元素的倒数第n个某类型的元素 3
:only-child 选择满足是其父元素的唯一一个子元素的元素 3
:last-child 选择满足是其父元素的最后一个元素的元素 3
:nth-child(n) 选择满足是其父元素的第n个子元素的元素 3
:nth-last-child(n) 选择满足是其父元素的倒数第n个子元素的元素 3
:empty 选择满足没有子元素的元素 3
:in-range 选择满足值在指定范围内的元素 3
:out-of-range 选择值不在指定范围内的元素 3
:invalid 选择满足值为无效值的元素 3
:valid 选择满足值为有效值的元素 3
:not(selector) 选择不满足selector的元素 3
:optional 选择为可选项的表单元素,即没有“required”属性 3
:read-only 选择有"readonly"的表单元素 3
:read-write 选择没有"readonly"的表单元素 3
:root 选择根元素 3

伪元素:

Selector Meaning CSS
::first-letter 选择指定元素的第一个单词 1
::first-line 选择指定元素的第一行 1
::after 在指定元素的内容前面插入内容 2
::before 在指定元素的内容后面插入内容 2
::selection 选择指定元素中被用户选中的内容 3

伪元素的应用

在博客看到了很多大佬们对::before/::after两个伪元素做了很多有趣的应用和拓展,在这里我也来实现一下啦(?˙▽˙?)

1、计数器

创建计数器,运用下列属性:

(1)counter-reset:设置计数器的起点,创建计数器标识符。

(2)counter-increment:指示元素将计数器递增。

(3)content:展示内容。

简单模拟生成有序列表的计数:

<div>
  <p>a</p>
  <p>b</p>
  <p>c</p>
</div>
div {
  /* 重置计数器(默认重置为0),命名标识符 */
  counter-reset: chapter;
}
div p {
  /* 出现p元素即递增(默认递增1) */
  counter-increment: chapter;
}
div p::before {
  /* 展示递增内容 */
  content: counter(chapter) ". ";
}

结果:

计算选中个数:

<div>
  <input type="checkbox">a</input>
  <input type="checkbox">b</input>
  <input type="checkbox">c</input>
  <input type="checkbox">d</input>
  <input type="checkbox">e</input>
</div>
<p>已选中<span></span>个</p>
div {
  counter-reset: chapter;
}
div input:checked {
  counter-increment: chapter;
}
p span::before {
  content: counter(chapter, upper-alpha);
}

结果:

2、增加点击热区

button::before {
  content: "";
  border: solid;
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
}

3、画分割线

p::before, p::after {
  content: "";
  display: inline-block;
  border-top: 1px solid black;
  width: 100px;
  margin: 5px;
}
<p>hello</p>

4、画各种图形和图标

· 六角星,由两块三角形组合而成:

div {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 80px solid #090;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  position: relative;
}
div::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 80px solid #090;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  top: 20px;
  left: -50px;
}

· 小图标:

.phone {
  margin: 100px;
  width: 100px;
  height: 12px;
  background-color: yellow;
  border-radius: 30%;
  position: relative;
  transform: rotate(45deg);
  float: left;
}
.phone::after {
  content: "";
  position: absolute;
  width: 35px;
  height: 35px;
  background-color: yellow;
  border-radius: 30%;
  top: -25px;
  left: -5px;
}
.phone::before {
  content: "";
  position: absolute;
  width: 35px;
  height: 35px;
  background-color: yellow;
  border-radius: 30%;
  top: -25px;
  left: 70px;
}
.power {
  margin: 50px;
  width: 80px;
  height: 80px;
  border: 12px solid yellow;
  border-radius: 50%;
  position: relative;
  float: left;
}
.power::before {
  content: "";
  width: 15px;
  height: 50px;
  border: 8px solid #fff;
  background-color: yellow;
  position: absolute;
  top: -30px;
  left: 25px;
}

图标设计借鉴:https://www.cnblogs.com/starof/p/4459991.html

更多大神设计创建的图标:http://nicolasgallagher.com/pure-css-gui-icons/

5、超链接特效

button {
  display: relative;
  width: 120px;
  height: 40px;
  margin: 30px;
  font-weight: 600;
  font-size: 16px;
  background-color: #f4511e;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}
button:hover::before button:hover::after {
  position: absolute;
}
button:hover::before {
  content: "[";
  left: -10px;
  margin-right: 5px;
}
button:hover::after {
  content: "]";
  right: -10px;
  margin-left: 5px;
}

6、清除浮动

在子元素设置为浮动时,因为浮动后变脱离了正常的文档流,因此父元素无法包裹子元素,导致出现视觉上的子元素塌陷效果,这时候就需要清除浮动。

给浮动元素的容器添加下面这段代码即可清除浮动所带来的影响:

.container::after {
  content: ‘‘;
  display: block;
  clear: both;
}

参考:https://www.cnblogs.com/ihardcoder/p/5294927.html

 

原文地址:https://www.cnblogs.com/xiaokeai0110/p/9908561.html

时间: 2024-10-14 14:22:46

CSS基础学习记录——伪类和伪元素的相关文章

CSS基础学习记录——CSS中哪些属性可以继承?

CSS的属性,其中一个分类是有继承性和无继承性. 总结一下父元素的哪些属性是会继承给其子元素的,单纯加深印象,有用得到的时候方便回来瞅瞅. 下面的总结内容来自:https://www.cnblogs.com/thislbq/p/5882105.html 有继承性的属性 1.字体系列属性 font:组合字体 font-family:规定元素的字体系列 font-weight:设置字体的粗细 font-size:设置字体的尺寸 font-style:定义字体的风格 font-variant:设置小型

CSS基础学习九:伪类

CSS伪类 CSS语法中伪类用于向某些选择器添加特殊的效果.常见的伪类有: (1)语法 伪类的语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用. selector.class : pseudo-class {property: value} (2)锚伪类 在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态. a:link {color: #FF0

CSS伪类和伪元素的区别

CSS - 伪类和伪元素的区别 本文转载于http://www.cnblogs.com/iceflorence/p/5796083.html 伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它

CSS中伪类及伪元素用法详解

原文:CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active  大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上. 写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hover.:

CSS - 伪类和伪元素的区别

伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式. 属性 描述 :active 向被激活的元素添加样式 :focus 向拥有键盘输入焦

浅谈CSS的伪类与伪元素

本文向大家展示了CSS的伪类与伪元素,介绍的非常全面,这里推荐给大家参考下. 伪类 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式.由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类. 伪类选择器:CSS中已经定义好的选择器,不能随便取名 :link 伪类将应用于未被访问过的链接,与:v

CSS 属性 - 伪类和伪元素的区别

伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: css3 为了区分两者,明确规定伪类用一个冒号来表示,伪元素则用两个冒号来表示 :Pseudo-classes ::Pseudo-elements ②功能不一样: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果

详解 CSS 属性 - 伪类和伪元素的区别

CSS的元素选择器除了根据id(#).class(.).属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素.它们就是伪类和伪元素.跟id选择器.类选择器.属性选择器以及派生选择器等等这些从HTML文档层次结构(DOM树)中获取元素不同的是,伪类和伪元素是预定义的.独立于文档元素的.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).当然,伪类和伪元素的表示形式也使用“:”(英文冒号)

CSS 伪类与伪元素

CSS的元素选择器除了根据id(#).class(.).属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素.它们就是伪类和伪元素.跟id选择器.类选择器.属性选择器以及派生选择器等等这些从HTML文档层次结构(DOM树)中获取元素不同的是,伪类和伪元素是预定义的.独立于文档元素的.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).当然,伪类和伪元素的表示形式也使用":"(