w3c上对伪类和为元素的定义分别为:
伪类：伪类用于向某些选择器添加特殊的效果。伪元素：伪元素用于将特殊的效果添加到某些选择器
css3为了明确伪类和伪元素的区别，已经明确了单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
span:hover //伪类
span::before //伪元素
但是，为了保证兼容性，现在伪元素普遍还是使用单引号。下面我将用单引号的形式给大家做介绍
常见的伪类（pseudo-classes）和伪元素（pseudo-elements）
HTML中常见伪类和伪元素的区别
伪元素的兼容性
Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
几乎所有的移动浏览器。
伪元素:before和:after的定义和基本用法
定义：
:before 选择器在被选元素的内容前面插入内容。
:after 选择器在被选元素的内容后面插入内容。
使用：
使用 content 属性来指定要插入的内容。content有几个比较有用的值：[String] – 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：
a:after { content: "↗"}
attr() – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例：
a:after { content:"(" attr(href) ")"}
url() / uri() – 用于引用媒体文件。示例：
h1::before { content: url(logo.png)}
counter() – 调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例：
h2:before { counter-increment: chaptercontent: "Chapter " counter(chapter) ". " }
:active 表示一个被用户激活的元素(比如一个按钮)。当使用鼠标时，“activation”通常在用户按下鼠标主按钮时开始。
:active 通常用于 a 和 button 元素。这个伪类的其他常见目标包括被激活元素中包含的元素，以及通过关联的 label 被激活的表单元素。
由 :active 定义的样式将被后续与链接相关的伪类(:link，:hover，或:visited)覆盖，这些伪类至少具有相同的特性。为了适当地样式化链接，将:active规则放在所有其他与链接相关的规则之后，正如 lvha 命令: :link - :visited - :hover - :active 所定义的那样。
示例：
CSS
:checked 伪类选择器表示 radio 、 checkbox 或 option 元素，选中或切换到打开状态。
注意： 对于 option不同浏览器对 :checked 伪类实现上会有差别。
例子：
HTML
CSS
:disabled 表示任何被禁用的元素。如果一个元素不能被激活(选中、点击、输入，等等)或接受焦点，那么它就是禁用的。元素还有一个 enabled 状态，在这个状态下，它可以被激活或接受焦点。
示例：
HTML
CSS
:empty 表示任何没有子元素的元素。子元素可以是元素节点，也可以是文本(也包括空格)。注释、处理指令和CSS内容并不影响元素是否为空。
例子：
HTML
CSS
:first-child 表示一组同级元素中的第一个元素。
:last-child 表示一组同级元素中的最后一个元素。
示例：
HTML
CSS
:first-of-type 表示一组同级元素中该类型的第一个元素。
:last-of-type 表示一组同级元素中该类型的最后一个元素。
示例：
HTML
CSS
:focus 表示一个接收到焦点的元素(比如表单输入)。它通常在用户单击、点击元素或用键盘的Tab键选择元素时触发。
示例：
HTML
CSS
:hover 通常在用户用光标(鼠标指针)悬停在元素上时触发。
示例：
HTML
CSS
:link 表示尚未访问的元素。它匹配每一个具有href属性的未访问 a 或 area 元素。
默认情况下，大多数浏览器对访问的链接应用一个特殊的颜色值。可能只有在访问它们之前才具有特殊的字体颜色。（之后，你需要清除浏览器历史记录才能再次看到它们。）然而，background-color的值可能会保留，因为大多数浏览器默认不会在访问过的链接上设置该属性。
示例：
HTML
CSS
:not() 表示不匹配选择器列表的元素。因为它阻止特定项被选中，所以它被称为否定伪类。
需要注意的是： :not() 有许多 怪癖、技巧和意想不到的结果 ，在使用它之前应该注意这些问题。
示例：
HTML
CSS
:nth-child() 表示根据元素的位置匹配同级的元素。
:nth-of-type() 根据元素在相同类型(标记名)的兄弟元素中的位置匹配它们。接收的参数类似于 :nth-child() 。
说明：
示例：
:only-child 表示没有兄弟元素的元素。
示例：
HTML
CSS
:only-of-type 表示没有相同类型的兄弟元素。
示例：
HTML
CSS
匹配文档树的根元素。对于 HTML 来说， :root 表示 <html> 元素，除了 优先级 更高之外，与 html 选择器相同。
示例： 在声明 全局 CSS 变量 时 :root 会很有用：
使用：
:target 表示一个唯一的元素(目标元素)，其id与URL的片段匹配。
示例：
下面的URL有一个片段(用#符号表示)，它指向一个名为section2的元素:
当当前URL等于上面的URL时，下面的元素将被a:target选择器选中:
:visited 表示用户已经访问过的链接。出于隐私的原因，可以使用这个选择器修改的样式非常有限。
MDN Pseudo-classes
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）