关于css:CSS伪类与伪元素

71次阅读

共计 914 个字符，预计需要花费 3 分钟才能阅读完成。

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 外面的

好了拜拜！

正文完