CSS中伪类和伪元素的详细介绍（代码示例）-css教程-PHP中文网

首页

web前端

css教程

CSS中伪类和伪元素的详细介绍（代码示例）

不言

Jan 24, 2019 am 10:13 AM

csscss3

本篇文章给大家带来的内容是关于CSS中伪类和伪元素的详细介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、伪类

伪类包含两种：状态伪类（UI 伪类）和结构性伪类。

(1)状态伪类是基于元素当前状态进行选择的。

在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

常见的状态伪类主要包括：

:link 应用于未被访问过的链接；
:hover 应用于鼠标悬停到的元素；
:active 应用于被激活的元素；
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。
:target 应用于链接点击后指向元素

前 4 个伪类的特指度相同，如果不按照这里列出的顺序使用它们，浏览器可能不会显示预期结果。为了好记，可以这么想：“LoVe? HA!”大写字母就是每个伪类的头一个字母。

input:focus {border:1px solid blue;}

会在光标位于 input 字段中时，为该字段添加一个蓝色边框。这样可以让用户明确
地知道输入的字符会出现在哪里。

<a href="#more_info">More Information</a>
<h2 id="more_info">This is the information you are looking for.</h2> 
#more_info:target {background:#eee;}

会在用户单击链接转向 ID 为 more_info的元素时，为该元素添加浅灰色背景。

(2)结构性伪类是css3新增选择器

利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

常见的包括：

:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child() 选择某个元素的一个或多个特定的子元素；
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type() 选择指定的元素；
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择的元素是它的父元素的唯一一个子元素；
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty 选择的元素里面没有任何内容。

二、伪元素

伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中！

常见的伪元素选择器包括：

:first-letter 选择元素文本的第一个字（母）。
:first-line 选择元素文本的第一行。
:before 在元素内容的最前面添加新内容。
:after 在元素内容的最后面添加新内容。

三、注意

单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素，为了兼容某些浏览器，一般都采用单冒号

兼容性的问题，交给postcss去做。本文并未涉及兼容性的写法，包括前缀问题，可以交给autoprefixer去做。（这句话啥意思没懂，以后看看说的啥）

伪类（结构伪类）的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

四、伪元素的使用

（1）清除浮动

.clear:after {
content: '';
display: block;
clear: both;
}

(2) 画分割线

<style>
* {
  padding: 0;
  margin: 0;
}
.spliter::before, .spliter::after {
  content: '';
  display: inline-block;
  border-top: 1px solid black;
  width: 200px;
  margin: 5px;
}
  </style></head><body>
  <p class="spliter">分割线</p></body>

以上是CSS中伪类和伪元素的详细介绍（代码示例）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：segmentfault。如有侵权，请联系admin@php.cn删除