1. CSS3中

:Pseudo-classes 伪类

::Pseudo-elements 伪元素

2. 为什么叫伪类和伪元素?

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素标签才能达到,但它们并不是真正的类或标签。

3. 伪类和伪元素可以使用“子绝父相”

div {
....
position: relative;
} div::before{
content:...;
position: absolute;
}

CSS - 伪类和伪元素的更多相关文章

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

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  2. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

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

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  4. 详解 CSS 属性 - 伪类和伪元素的区别[转]

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  5. CSS 属性 - 伪类和伪元素

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...

  6. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  7. CSS的伪类和伪元素

    伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...

  8. 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  9. 《转载》详解 CSS 属性 - 伪类和伪元素的区别

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  10. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

随机推荐

  1. re模块、正则表达式

    一.正则表达式 1.正则表达式不是Python独有的,它是一门独立的技术,所有的编程语言都可以使用正则表达式,在Python中使用正则表达式就要借助于re模块,或者是支持正则表达式书写的方法. 2.用 ...

  2. 看 C++ Primer 的58页, 讲拷贝时不能忽略 底层const这里的说的原因有点牵强, 这里给出自己的理解

    extern const  int ci =42; const int * p2  = &ci; extern const  int *const p3= p2; int *p= p3;   ...

  3. Laravel Vuejs 实战:开发知乎 (4)实现找回密码

    资料 : Resetting Passwords   以及 Episode 35 - The Password Reset Flow 由于之前的实现里默认自带重置找回密码功能,不再复述. 默认的重置页 ...

  4. 【Struts 基础案例】

    LoginAction package k.action; import k.form.UserForm; import org.apache.struts.action.*; import java ...

  5. java编译器不匹配问题(java compiler level does not match the version of the installed java project facet)

    问题:项目经常copy过来,经常会报说Java编译器不匹配 解决方法:找到项目所在的目录,在.settings子目录里面,用文本编辑器打开org.eclipse.wst.common.project. ...

  6. Electron调用.Net的Dll以及将.Net程序作为子进程运行

    调用.Net Dll const edge = require('electron-edge-js'); var testDll = edge.func({ assemblyFile: ". ...

  7. 13 DFT变换的性质

    DFT变换的性质 线性性质 \[ \begin{aligned} y[n]&=ax[n]+bw[n]\xrightarrow{DFT}Y[k]=\sum_{n=0}^{N-1}(ax[n]+ ...

  8. 彻底解决Spring mvc中时间的转换和序列化等问题

    痛点 在使用Spring mvc 进行开发时我们经常遇到前端传来的某种格式的时间字符串无法用java8的新特性java.time包下的具体类型参数来直接接收. 我们使用含有java.time封装类型的 ...

  9. ubuntu 允许root用户登录到ssh

    ubuntu的系统太太太麻烦了,我喜欢centos,但是还是要用ubuntu做东西,讨厌,装完系统以后,因为他不让你用root,我新建了一个wqz的用户名. 1.首先更新root的密码 sudo pa ...

  10. 一个支持国密SM2/SM3/SM4/SM9/ZUC/SSL的密码工具箱

    转:https://blog.csdn.net/xuq09/article/details/91815366 The GmSSL Project网址:http://gmssl.org/docs/qui ...