首页 > 开发 > CSS > 正文

css3 伪元素和伪类选择器详解

2024-07-11 08:54:03
字体:
来源:转载
供稿:网友

伪类选择器: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: 在某个元素之后插入一些内容;
   使用方法:选择器:伪元素{样式}

 结构性伪类选择器
 1.  四个最基本的:root、not、empty、target   

 2. first-child、last-child、nth-child、nth-last-child、              
nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)

 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-last-child()从某父元素的最后一个子元素开始计算,来选择特定的元素。

看下面一个例子:


复制代码
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表