0

0

CSS3中有哪些伪类选择器, 伪类选择器nth-child() 怎么使用

yulia

yulia

发布时间:2018-09-12 15:54:21

|

2329人浏览过

|

来源于php中文网

原创

css3中新的属性给我们带来了不少的便利,比如伪类选择器 nth-child(),但是它在ie6-8和ff3.0-浏览器不支持,css3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以设置更加个性的标题和段落等,不过,目前nth-of-type(n)只支持火狐3、opera、safari和chrome等部分浏览器。

:nth-child()选择某个元素的一个或多个特定的子元素;你可以按这种方式进行选择: 

:nth-child(length);/*参数是具体数字 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);/*表示隔几选一*/

例子:

li:nth-child(3){background:orange;}/*把第3个li的背景设为橙色*/

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的li的背景设为橙色*/

li:nth-child(n+3){background:orange;}/*选择从第3个元素后面的li背景设为橙色*/

li:nth-child(-n+3){background:orange;}/*选择从第3个元素前面的li把背景设为橙色*/

li:nth-child(3n+1){background:orange;}/*这种方法是实现隔几选一的效果*/

:fist-child选择某个元素的第一个子元素

例子:

li:first-child {background: green;}/*把第1个li的背景设为绿色*/

:last-child选择某个元素的最后一个子元素

例子:

li:last-child {background: green;}/*把最后一个li的背景设为绿色*/

:nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算

:nth-last-child()选择器和前面的:nth-child()很相似,只是这里多了一个last,所以他起的作用就和前面的":nth-child"不一样了,他只要是从最后一个元素开始算,来选择特定元素。

例子:

li:nth-last-child(4) {background: red;}/*把倒数第4个li的背景设为红色*/

TalkMe
TalkMe

与AI语伴聊天,练习外语口语

下载

:nth-of-type()选择指定的元素

:nth-of-type类似于:nth-child,不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素,这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处。比如说,我们div.demo下有好多p元素,li元素,img元素等,但我只需要选择p元素,并让他每隔一个p元素就有不同的样式,那我们就可以简单的写成:

p:nth-of-type(even) {background-color: lime;}

除了可以将n设置为odd(偶数)或even(奇数)外,还可以将n设置为表达式,比如,nth-of-type(3n+2)

:nth-last-of-type()选择指定的元素,从元素的最后一个开始计算

这个选择器不用说大家都能想得到了,他和前面的:nth-last-child一样使用,只是他指一了元素的类型而以。

同样在IE6-8和FF3.0-浏览器不支持这种选择器

:first-of-type选择一个上级元素下的第一个同类子元素;

:last-of-type选择一个上级元素的最后一个同类子元素;

:nth-of-type,:nth-last-of-type;:first-of-type和:last-of-type实际意义并不是很大,我们前面讲的:nth-child之类选择器就能达到这此功能,不过大家要是感兴趣还是可以了解一下,个人认为实用价值并不是很大。此类说法仅供参考。

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

  • 1
  • 2
  • 3

如果我需要在ul只有一个p元素的时候,改变这个li的样式,那么我们现在就可以使用:only-child,如:

ul li {padding-left:10px;}

ul li:only-child {padding-left:15px}

:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素

是表示一个元素他有很多个子元素,而其中只有一个子元素是唯一的,那么我们使用这种选择方法就可以选择中这个唯一的子元素,比如说

伪类选择器的用法

CSS3 伪类选择器only-of-type的用法

CSS3 伪类选择器only-of-type的用法

如果我们想只选择中上面中的h2元素,我们就可以这样写,

h2:only-of-type{color:red;}

:empty选择的元素里面没有任何内容

:empty是用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格,比如说,你有三个段落,其中一个段落什么都没有,完全是空的,你想这个p不显示,那你就可这样来写:

p:empty {display: none;}

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

787

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

733

2023.11.06

css3教程
css3教程

php中文网为大家提供css3教程合集,CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。php中文网还为大家带来css3的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

398

2023.06.14

有哪些css3渐变属性
有哪些css3渐变属性

css3中渐变属性有linear-gradient、radial-gradient、conic-gradient、repeating-linear-gradient、repeating-radial-gradient等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

138

2023.11.01

length函数用法
length函数用法

length函数用于返回指定字符串的字符数或字节数。可以用于计算字符串的长度,以便在查询和处理字符串数据时进行操作和判断。 需要注意的是length函数计算的是字符串的字符数,而不是字节数。对于多字节字符集,一个字符可能由多个字节组成。因此,length函数在计算字符串长度时会将多字节字符作为一个字符来计算。更多关于length函数的用法,大家可以阅读本专题下面的文章。

920

2023.09.19

css中的padding属性作用
css中的padding属性作用

在CSS中,padding属性用于设置元素的内边距。想了解更多padding的相关内容,可以阅读本专题下面的文章。

133

2023.12.07

li是什么元素
li是什么元素

li是HTML标记语言中的一个元素,用于创建列表。li代表列表项,它是ul或ol的子元素,li标签的作用是定义列表中的每个项目。本专题为大家li元素相关的各种文章、以及下载和课程。

416

2023.08.03

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

68

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

127

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号