分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

CSS3 选择器用法小结

发布时间:2023-09-06 02:03责任编辑:赖小花关键词:CSS选择器

表单选择器:

/*:enabled 可用的 :disabled 被禁用的 :focus 获取了焦点的 多用在表单元素上*/input:enabled {...}input:disabled {...}input:focus {...}

属性选择器:

/*[attribute] [attribute=value] 选择具有对应属性的元素即使此属性没有实际作用*/a[target] {...}a[target=_blank] {...}

次序选择器:

:first-child 选取属于其父元素的首个子元素
?:last-child 选取属于其父元素的最后一个子元素
?:nth-child(n) 选取父元素的第n个子元素
?:nth-last-child(n) 倒序选取父元素的第n个子元素

/*计算次序时不考虑类型,但如果符合次序的元素跟选择器的类型不匹配,则不会被选取*/ul li:first-child {...}p:nth-child(odd) {...}p:nth-child(even) {...}p:nth-last-child(2) {...}

:first-of-type 父元素的特定类型的首个子元素的每个元素
?:last-of-type 父元素的特定类型的首个子元素的每个元素
?:nth-of-type(n) 父元素的特定类型的第n个子元素
?:nth-last-of-type(n) 父元素的特定类型的第n个子元素的每个元素,从最后一个子元素开始计数

/*只对类型匹配的元素进行次序计算*/ul li:first-of-type {...}p:last-of-type {...}p:nth-of-type(2) {...}

CSS3 选择器用法小结

原文地址:https://www.cnblogs.com/yangshifu/p/9277396.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved