一、伪类与伪元素
1.CSS 伪类实用于用户应用批示设施虚指一个元素(没有激活它)的状况。在 CSS 中, 一个伪类选择器只根据元素的状态, 而不是元素在文档树中的信息, 来抉择指标对象。
举例子::hover
这个款式会被任何与链接相干的伪类重写,像 :link
, :visited
, 和 :active
等。为了确保失效,:hover 规定须要放在:link 和:visited 规定之后,然而在:active 规定之前,依照 LVHA 的循程序申明:link-:visited-:hover-:active(记忆办法:LV 好啊!示意 LV 包很好)。
2.CSS[伪元素]伪元素是一个附加至选择器末的关键词,容许你对被抉择元素的特定局部批改款式。::after
用来创立一个伪元素,作为已选中元素的最初一个子元素。通常会配合 content
属性来为该元素增加装璜内容。这个虚构元素默认是行内元素。
奢侈形容:
1.CSS 伪类:为已存在的元素增加一个款式,然而这个款式却是不显示的,只有当用户执行了某个操作后才显示,比方 hover 伪类,只有用户鼠标通过时才会触发外面的款式。而且相似 hover 的还有 active,link,visited 这些,并且一个元素能够增加多个伪类。应用单冒号:前缀。
其款式写法:
:hover
2.CSS 伪元素:为某个已存在的元素在其外面生成一个元素,留神,伪元素最多能够生成两个,对应的有 before,与 after,就是在某个元素的后面或者前面生成一个元素。应用单冒号或者双冒号前缀都能够。
其款式写法:
: berfore ::before
:after ::after
尽管单冒号,和双冒号都能够实现想要的后果,然而:
CSS3 标准中的要求应用双冒号 (::) 示意伪元素,以此来辨别伪元素和伪类,比方::before 和::after 等伪元素应用双冒号 (::),:hover 和:active 等伪类应用单冒号(:)。除了一些低于 IE8 版本的浏览器外,大部分浏览器都反对伪元素的双冒号(::) 示意办法
上面这两个是例子:
上面这个菜鸟教程的例子,我改了一下:
上面这个是网上的动画成果,其中船上的烟是伪类生成的:
关上 F12 你能够看到:boat 的伪元素是生成在 boat 外面的
好了拜拜!