CSS选择器大汇总
2024-08-22 13:26:01
CSS选择器是学习CSS以及Web编程的基础。
整理出常用的CSS选择器,供自己和大家一起学习。
基本选择器
* /*通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用)*/
#id /*id选择器,匹配id是'id'的元素*/
.class /*类选择器,匹配所有类名中包含'class'的元素*/
E /*标签选择器*/
组合选择器
E,F /* 多元素选择器,用,(半角)分隔,同时匹配元素E和元素F*/
E F /*后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F*/
E>F /*子元素选择器,用>分隔,匹配E元素的所有直接子元素*/
E+F /*直接相邻选择器,匹配E元素之后的相邻的一个同级元素F(只匹配一个)*/
E~F /*普通相邻选择器(兄弟选择器),匹配E元素之后的同级元素F(无论直接相邻与否)*/
.class1.class2 /*匹配类名既包括'class1'又包括'class2'的元素*/
element#id /* 匹配id为'id'的element标签的元素*/
属性选择器
E[attr] /*匹配所有具有属性attr的元素,div[id]就能取到所有有id属*/性的div
E[attr = value] /*匹配属性attr值等于value的元素,div[id='test'],匹配id为test的div*/
E[attr ~= value] /*匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素*/
E[attr ^= value] /*匹配属性attr的值以value开头的元素*/
E[attr $= value] /*匹配属性attr的值以value结尾的元素*/
E[attr *= value] /*匹配属性attr的值包含value的元素*/
伪类选择器
伪类中像 E:something 这种形式,可以这样理解,首先选择器是E元素,这是大前提,然后something是限定范围的。
这样理解就可以减少不必要的误解。
- 结构化相关
E:first-child /*匹配E的父元素的第一个子元素且必须为E元素*/
E:last-child /*匹配E的父元素的最后一个子元素且必须为E元素*/
E:nth-child(3) /*匹配E的父元素的第3(值可以取正整数)个子元素且必须为E元素*/
E:nth-last-child(2) /*匹配E的父元素的倒数第2个子元素且必须为E元素*/
E:only-child /*匹配没有兄弟元素的E元素,即父元素下只有其一个子元素*/
E:nth-of-type(2) /*匹配E的父元素的第2(值可以取正整数)个和E同类型的子元素*/
E:nth-last-of-type(3) /*匹配E的父元素的倒数第3个和E同类型的子元素*/
E:first-of-type /*匹配E的父元素的第1个和E同类型的子元素,等同于E:nth-of-type(1)*/
E:last-of-type /*匹配E的父元素的最后1个和E同类型的子元素,等同于:nth-last-of-type(1)*/
E:only-of-type /*匹配其父元素下唯一一个E同种类型的子元素*/
E:empty /*匹配一个不包含任何子元素的元素,文本节点也被看作子元素*/
html:root /*匹配文档的根元素,对于HTML文档,就是HTML元素,也可以写成:root*/
- 状态相关
E:link /* 匹配所有未被访问过的链接(不是点击,有可能链接没被点击过却被访问过)*/
E:visited /*匹配所有已被访问过的链接*/
E:active /*匹配鼠标已经其上按下、还没松开的E元素*/
E:hover /*匹配鼠标悬停其上的E元素*/
E:focus /*匹配获得当前焦点的E元素*/
- 表单相关
E:enabled /*匹配表单中可用的元素*/
E:disabled /*匹配表单中禁用的元素*/
E:checked /*匹配表单中被选中的radio或checkbox元素*/
E::selection /* 匹配用户当前选中的元素*/
- 其他
E:lang(c) /* 匹配lang属性等于c的E元素*/
E:not(selector) /*匹配E的父元素下不匹配selector选择器的E元素*/
伪元素选择器
以下四个也可以用单冒号,效果一样
E::first-line /*匹配E元素内容的第一行*/
E::first-letter /*匹配E元素内容的第一个字母*/
E::before /*在E元素之前插入生成的内容*/
E::after /*在E元素之后插入生成的内容*/
hover选择器
E:hover F /*E元素是悬浮元素,F是E的子元素,E的hover可以改变F的状态*/
E:hover>F /*E元素是悬浮元素,F是E的直接子元素,E的hover可以改变F的状态*/
E:hover+F /*E元素是悬浮元素,F是E的直接相邻的一个同级元素,E的hover可以改变F的状态*/
E:hover~F /*E元素是悬浮元素,F是E的同级元素(兄弟元素),E的hover可以改变F的状态*/
nth-child选择器
CSS选择器中n表示非负整数
E:nth-child(1) /*匹配E的父元素下第一个子元素且为E元素*/
E:nth-child(n) /*所有E元素(和E标签选择器貌似没什么区别。。)*/
E:nth-child(2n) /*匹配E的父元素下所有子元素次序是偶数的E元素(比如第2,4,6,8...个)*/
E:nth-child(even) /*等于E:nth-child(2n) */
E:nth-child(2n+1) /*匹配E的父元素下所有子元素次序是奇数的E元素(比如第1,3,5,7..个)*/
E:nth-child(odd) /*等于E:nth-child(2n+1) */
E:nth-child(n+4) /*匹配E的父元素下所有子元素次序大于等于4的E元素(比如第4,5,6,7...个)*/
E:nth-child(-n+5) /*匹配E的父元素下所有子元素次序小于等于5的E元素(比如第1,2,3,4,5个)*/
E:nth-child(3n+2) /*匹配E的父元素下所有子元素次序符合3n+2的E元素(比如第2,5,8,11个)*/
nth-last-child选择器也是同理
a:link, a:hover, a:active, a:visited 的顺序
顺序依次是a:link>>a:visited>>a:hover>>a:active
本文首发在个人博客yoowin.me,欢迎访问。
最新文章
- POJ 2186 Popular Cows(Targin缩点)
- javaweb常见问题解决
- 基本概率分布Basic Concept of Probability Distributions 6: Exponential Distribution
- 【jQuery基础学习】09 jQuery与前端(这章很水)
- LightOJ1086 Jogging Trails(欧拉回路+中国邮递员问题+SPFA)
- sqlserver2008创建数据库 报 Cannot read property is filestream 此属性不可用于sql server 7.0 解决
- robotframework笔记10
- POJ1226 - Substrings(KMP+二分)
- Lost connection to MySQL server at ‘reading initial communication packet', system error: 0 mysql远程连接问题
- twitter 监测登陆活动
- 指针数组与带参main函数
- Java字符编码浅析
- 玩转X-CTR100 l STM32F4 l MPU6050加速度陀螺仪传感器
- 分形之希尔伯特-皮亚诺(Hilbert-Peano)曲线
- JS 获取时间
- bootstrap做的导航
- 170612、web如何项目优化
- 并发编程 - 线程 - 1.线程queue/2.线程池进程池/3.异步调用与回调机制
- K-means聚类算法与EM算法
- 使用终端命令行将本地项目上传到Github并提交代码
热门文章
- Execution failed for task':app;clean'
- oracle 小测
- Ubuntu安装桌面环境
- 1分钟选好最合适你的JavaScript框架
- ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据
- linux下怎么卸载自带的JDK和安装想要的JDK
- Java之线程,常用方法,线程同步,死锁
- RabbitMQ入门-高效的Work模式
- POJ1975 Median Weight Bead floyd传递闭包
- cve-2017-0199&;metasploit复现过程