CSS的伪元素和伪类

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类—— :hover, :active, :visited, :focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容（可以是文字，图标等，下图就是一个正方形图标，图标是通过css绘制的）。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。但是在开发者工具模式下可以看到形如“::before”字段。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标

参考：1、http://www.cnblogs.com/keyi/p/5943133.html

　　 2、http://www.w3school.com.cn/css/css_pseudo_elements.asp

时间： 2024-11-08 19:06:53

CSS的伪元素和伪类的相关文章

伪元素、伪类基础理解

前几天同事问我css中单冒号和双冒号是什么意思,我也模糊得很,只有个笼统的概念就是:伪元素和伪类.一直以为,页面布局中很少使用到伪类,结果细细研究发现我们经常使用的hover就是一个最简单的伪类,顿时觉得自己太OUT了,紧跟着这两天都在看这些东西,其实伪类最简单的理解就是用于向某些选择器添加特殊的效果. 具体伪类.伪元素有哪些我就不一一列举,在w3c中列举的很清楚.我主要写写应用的实例. 1.来个简单的,咱们最常用到的向超链接添加不同的颜色: <html> <head> <m

【CSS3】详解伪元素与伪类

1.伪类伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式.由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类. 伪类的定义: (1)伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息. (2)伪类由一个冒号:开头,冒号后面是伪类的名称和包

伪元素和伪类区别

伪类用于向某些选择器添加特殊的效果. 伪元素用于将特殊的效果添加到某些选择器. 伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lang 伪元素有::first-line,:first-letter,:before,:after 使用伪类: 1 2 3 4 5 6 7 <style> p>i:first-child {color: red} </style> <p> <i>fir

伪元素与伪类

伪元素与伪类为什么要写这篇文章? 伪元素和伪类一直都是很容易混淆的,没有大量的实践和用心去体会是不容易记住的.我相信对于绝大部分新手来说是这样的,我自己也是经常记不住,像这样不算难的问题,一直查阅别人的博文,没有点自己的思想,好像是很low的一件事,因此写下这篇文章. 什么是伪类? 伪类的实质是把某种幻像类关联到与伪类相关的元素上,举个例子: <div> <p>These are the necessary steps:</p> </div> 使用规则

[css选择器]伪元素和伪类

伪元素伪元素可以创建一些文档语言无法创建的虚拟元素. 比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line). 同时,伪元素还可以创建源文档不存在的内容,比如使用 ::before 或 ::after. 不能用伪元素插入对交互有实质性影响的内容,以避免css不能正确加载.另外,屏幕阅读器也没有统一的方式解释伪元素,有的会直接忽略它们伪类原文地址:https://www.cnblogs.com/L-xmin/

css 选择器 & UI元素的伪类选择器 & 伪元素选择器

UI元素的伪类选择器 1. :focus 用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable 用来指定元素处于不可用时的状态表单里应用较多 4. read-only 用来获取元素属于只读状态时 5. read-write 用来匹配可读和可写的元素 input search 6. :checked 用来获取单选框处于选取状态时的样式 7. :default 选取用来选取,打开时默认选取状态时单选框 8. :indeter

CSS——伪元素与伪类

伪类与伪元素伪类:在特殊性中占据0,0,1,0 :link 向未访问的链接添加特殊的样式.也就是说,链接所指的 URI 尚未出现在用户代理的历史中.这种状态与 :visited状态是互斥的. :visited 对已访问的链接添加样式. :hover 对鼠标悬停时的链接应用样式 :foucs 对鼠标聚焦的链接应用样式 :active 向激活(在鼠标点击与释放之间发生的事件)的元素添加特殊的样式. 对于上述伪类,要遵循顺序书写!! :nth-child(n) 从父元素匹配索引为n的子元素,设置样式

伪元素和伪类的区别

CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 区别:伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因. 伪类种类伪元素种类区别这里用伪类 :first-child 和伪元素 :first-letter 来进行比较.

伪元素和伪类

相同:都用于给某些选择器添加特殊的效果区别:伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因.下面罗列写常见的伪类与伪元素--伪类种类:伪元素种类:CSS3要求对伪元素使用两个冒号以便与伪类进行区别.但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者.