伪类与伪元素

kamushin233 发布于2019-08-28 18:30 / 1350人阅读

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

介绍

伪类和伪元素是css中很常见的两个概念，利用的好，能够很方便的实现一些特殊效果。伪类与伪元素由于用法相近，导致平时使用并不能很好的区分这两个概念。
伪类（pseudo-classes）：伪类类似于class，用于对已有元素增加特殊状态，比如:hover, :active, :lang, :first-child等。
伪元素（pseudo-elements）：伪元素类似于element，用于在DOM中增加一个特殊的element节点，比如:after, :before, :first-line等。

使用伪类

伪类包括:hover, :active, :link, :focus, :visited, :lang, :first-child。其中每一个的作用如下图：

因为伪类在项目中经常使用，这里不做demo 。

伪元素

伪元素包括:first-line, :first-letter, :before, :after。具体作用见下图

:first-line对元素第一行设置特殊样式。相当于将元素第一行看作是一个独立的元素进行设置样式。
:first-letter对元素第一个字进行设置样式。相当于将元素第一个字当作一个独立的元素进行样式设置。

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

效果如图：

:before在元素前添加一个元素。
:after在元素后添加一个元素。
有一些效果会有一个小尖头，可以很方便的用:before,:after来实现。

.box:before {
  content: "before";
  font-size: 12px;
  display: inline-block;
  width: 21px;
  height: 21px;
  border: 1px solid red;
  border-right: 0;
  border-top: 0;
  transform: rotate(45deg);
  position: relative;
  top: 2px;
  left: -20px;
}
.box:after {
  content: "after";
  font-size: 12px;
  display: inline-block;
  width: 21px;
  height: 21px;
  border: 1px solid red;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
  position: relative;
  top: 3px;
  left: 20px;
}

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

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

伪类与伪元素

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

ChanceWong 2019-08-30 15:55 评论0 收藏0
总结常用伪类与伪元素

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

anRui 2019-08-30 10:50 评论0 收藏0
谈谈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