css伪类选择器和伪元素选择器（css3伪元素选择器）

编程日记 • 2026-02-18 23:51 • 阅读 0

伪类选择器：CSS中已经定义好的选择器,不能随便取名

常用的伪类选择器是使用在a素上的几种，`如a:link|a:visited|a:hover|a:active`

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

伪素选择器：并不是针对真正的素使用的选择器，而是针对CSS中已经定义好的伪素使用的选择器。

CSS中有如下四种伪素选择器：
· first-line:为某个素的第一行文字使用样式；
· first-letter:为某个素中的文字的首字母或第一个字使用样式；
· before:在某个素之前插入一些内容；
· after: 在某个素之后插入一些内容；
使用方法：选择器：伪素{样式}

3. nth-of-type、nth-last-of-type
4. 循环使用样式
5. only-child

:root()选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配素E所在文档的根素。在HTML文档中，根素始终是<html>。“:root”选择器等同于<html>素

:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个素之外的所有素。

:empty()选择器表示的就是空。用来选择没有任何内容的素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

:target()选择器来对页面某个target素(该素的id被当做页面中的超链接来使用)指定样式，该样式只在用户了页面中的超链接，并且跳转到target素后起作用

“:first-child()”选择器表示的是选择父素的第一个子素的素E。简单点理解就是选择素中的第一个子素，记住是子素，而不是后代素。

看下面一个例子：

:nth-child()可以选择某个的一个或多个特定的子素，你可以按这种方式进行选择：
        :nth-child(length);/*参数是具体数字*/
        :nth-child(n);/*参数是n,n从0开始计算*/
        :nth-child(n*length)/*n的倍数选择，n从0开始算*/
        :nth-child(n+length);/*选择大于length后面的素*/
        :nth-child(-n+length)/*选择小于length前面的素*/
        :nth-child(n*length+1);/*表示隔几选一*/
        //上面length为整数

值得注意的是：nth-child(0)没有选择素，nth-child(1)选择第一个素。

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父素中指定的某种类型的子素。当某个素中的子素不单单是同一种类型的子素时，使用“:nth-of-type(n)”选择器来定位于父素中某种类型的子素是非常方便和有用的。

":only-child"表示的是一个素是它的父素的唯一一个子素。

伪素：
CSS中的伪素大家以前看过：:first-line,:first-letter,:before,:after;
那么在CSS3中，他对伪素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“：：”和一个“：”css3中主要用来区分伪类和伪素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。

::before和::after这两个主要用来给素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动，

::selection用来改变浏览网页选中文的默认效果

今天的文章 css伪类选择器和伪素选择器（css3伪素选择器）分享到此就结束了，感谢您的阅读。

css伪类选择器和伪元素选择器（css3伪元素选择器）

相关推荐