【响应式Web前端设计】CSS3伪类与伪元素的区别

首先先来看看伪类与伪元素的定义
w3c中对于它们是这么解释的

CSS中伪类与伪元素的概念是很容易混淆的,今天就来谈谈伪类与伪元素之间的区别
伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器
讲道理，可能我语文不好，我觉得这两句话是等价的
根本不能看出有什么区别
都是对某些选择器“加特技”

标准有这么一句话翻译过来是这样的
CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化
这话更抽象，其实意思就是对那些我们不能通过class、id等选择元素的补充

区别

这个区别我们需要一个例子来理解

This is a text

运行结果是如图

如果我们想要第一个em标签字体颜色变红怎么做呢
使用我们熟悉的伪类很简单

em:first-child {
color: red;
}

如果我们想要第一个em标签字体颜色变红怎么做呢
使用我们熟悉的伪类很简单

em:first-child {
color: red;
}

运行结果如图

但是如果不存在伪类我们怎么做呢
这是我们就需要为第一个em标签添加类

This is a text

em.first-child { color: red; } 可以实现同样的效果

还是这个例子
现在我想让这个段落的第一个字母变红
怎么做呢
这回我们需要使用伪元素

p::first-letter {
color: red;
}

【响应式Web前端设计】CSS3伪类与伪元素的区别相关推荐

【响应式Web前端设计】一文学会使用Bootstrap！
文章目录 1 概念 2 Bootstrap简介 3 布局容器 4 导航栏(navbar) 4.1 基本 4.2 响应式 5 垂直表单-基本表单 6 栅格系统 7 标签页 8 响应式工具请先学习该文 ...
【响应式Web前端设计】:link、:hover、:active和:visited的区别
:link.:hover.:active和:visited的区别? :link表示鼠标点击之前,也称为原始状态 :hover表示鼠标悬停状态 :active表示鼠标点击状态 :visited表示鼠标点 ...
【响应式Web前端设计】CSS3 :nth-of-type() 选择器
<!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) {background:#ff0000; ...
【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图文）
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...
【响应式Web前端设计】css中：overflow：hidden解决塌陷
overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏. 1.我们给一个父元素,里面有两个子元素 2.样式如下:给父元素设置背景颜色,子元素设置边框,两个字元素向左 ...
【响应式Web前端设计】CSS浮动(float,clear)讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
【响应式Web前端设计】!important的用法及作用
div { color: #f00 !important; } div { color: #000; } //上述代码中,ie6及其以下浏览器div的文本颜色为#fff,后面的重写的div样式没有起作 ...
【响应式Web前端设计】new Option()函数的作用（三区联动）
在做三级联动的时候遇见了这个函数,对函数的用法进行一下小总结,不太详细,敬请谅解. 作用:用于创建一个新的选项 Option()构造函数接受两个参数:文本(text)和值(value);第二个参数可选 ...
【响应式Web前端设计】设置图片间隙为0
解决方案一background 设置父容器的background,可以平铺一个合适的背景或图片.这样的话,两个图片之间的过渡,就会显得更加平滑.但是相关空隙依然存在,只不过因为父容器的背景色的缘故,使 ...

【响应式Web前端设计】CSS3伪类与伪元素的区别

【响应式Web前端设计】CSS3伪类与伪元素的区别相关推荐

最新文章

热门文章