jquery CSS选择器笔记


Posted in Javascript onMarch 29, 2010

去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。

这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。

笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器。今天的笔记中包括44个选择器,基本涵盖了CSS 2和CSS 3的所有规定。

序号 选择器 含义
1. * 通用元素选择器,匹配任何元素
2. E 标签选择器,匹配所有使用E标签的元素
3. .info class选择器,匹配所有class属性中包含info的元素
4. #footer id选择器,匹配所有id属性等于footer的元素

实例:

* { margin:0; padding:0; } 
p { font-size:2em; } 
.info { background:#ff0; } 
p.info { background:#ff0; } 
p.info.error { color:#900; font-weight:bold; } 
#info { background:#ff0; } 
p#info { background:#ff0; }

二、多元素的组合选择器

序号 选择器 含义
5. E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
6. E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
7. E > F 子元素选择器,匹配所有E元素的子元素F
8. E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F

实例:

div p { color:#f00; } 
#nav li { display:inline; } 
#nav a { font-weight:bold; } 
div > strong { color:#f00; } 
p + p { color:#f00; }

三、CSS 2.1 属性选择器

序号 选择器 含义
9. E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)
10. E[att=val] 匹配所有att属性等于“val”的E元素
11. E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
12. E[att|=val] 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等

实例:

p[title] { color:#f00; } 
div[class=error] { color:#f00; } 
td[headers~=col1] { color:#f00; } 
p[lang|=en] { color:#f00; } 
blockquote[class=quote][cite] { color:#f00; }

四、CSS 2.1中的伪类

序号 选择器 含义
13. E:first-child 匹配父元素的第一个子元素
14. E:link 匹配所有未被点击的链接
15. E:visited 匹配所有已被点击的链接
16. E:active 匹配鼠标已经其上按下、还没有释放的E元素
17. E:hover 匹配鼠标悬停其上的E元素
18. E:focus 匹配获得当前焦点的E元素
19. E:lang(c) 匹配lang属性等于c的E元素

实例:

p:first-child { font-style:italic; } 
input[type=text]:focus { color:#000; background:#ffe; } 
input[type=text]:focus:hover { background:#fff; } 
q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }

五、 CSS 2.1中的伪元素

序号 选择器 含义
20. E:first-line 匹配E元素的第一行
21. E:first-letter 匹配E元素的第一个字母
22. E:before 在E元素之前插入生成的内容
23. E:after 在E元素之后插入生成的内容

实例:

p:first-line { font-weight:bold; color;#600; } 
.preamble:first-letter { font-size:1.5em; font-weight:bold; } 
.cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; } 
a:link:after { content: " (" attr(href) ") "; }

六、CSS 3的同级元素通用选择器

序号 选择器 含义
24. E ~ F 匹配任何在E元素之后的同级F元素

实例:

p ~ ul { background:#ff0; }

七、CSS 3 属性选择器

序号 选择器 含义
25. E[att^=”val”] 属性att的值以"val"开头的元素
26. E[att$=”val”] 属性att的值以"val"结尾的元素
27. E[att*=”val”] 属性att的值包含"val"字符串的元素

实例:

div[id^="nav"] { background:#ff0; }

八、CSS 3中与用户界面有关的伪类

序号 选择器 含义
28. E:enabled 匹配表单中激活的元素
29. E:disabled 匹配表单中禁用的元素
30. E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
31. E::selection 匹配用户当前选中的元素

实例:

input[type="text"]:disabled { background:#ddd; }

九、CSS 3中的结构性伪类

序号 选择器 含义
32. E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
33. E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
34. E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
35. E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
36. E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
37. E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
38. E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
39. E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
40. E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
41. E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
42. E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素

实例:

p:nth-child(3) { color:#f00; } 
p:nth-child(odd) { color:#f00; } 
p:nth-child(even) { color:#f00; } 
p:nth-child(3n+0) { color:#f00; } 
p:nth-child(3n) { color:#f00; } 
tr:nth-child(2n+11) { background:#ff0; } 
tr:nth-last-child(2) { background:#ff0; } 
p:last-child { background:#ff0; } 
p:only-child { background:#ff0; } 
p:empty { background:#ff0; }

十、CSS 3的反选伪类

序号 选择器 含义
43. E:not(s) 匹配不符合当前选择器的任何元素

实例:

:not(p) { border:1px solid #ccc; }

十一、CSS 3中的 :target 伪类

序号 选择器 含义
44. E:target 匹配文档中特定"id"点击后的效果
请参看HTML DOG上关于该选择器的详细解释实例
(完)
Javascript 相关文章推荐
JavaScript Sort 表格排序
Oct 31 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 #Javascript
javascript delete 使用示例代码
Mar 29 #Javascript
JavaScript 格式字符串的应用
Mar 29 #Javascript
js DataSet数据源处理代码
Mar 29 #Javascript
javascript 节点遍历函数
Mar 28 #Javascript
javascript 类型判断代码分析
Mar 28 #Javascript
js chrome浏览器判断代码
Mar 28 #Javascript
You might like
一个图形显示IP的PHP程序代码
2007/10/19 PHP
php 获取本机外网/公网IP的代码
2010/05/09 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
sae使用smarty模板的方法
2013/12/17 PHP
php eval函数一句话木马代码
2015/05/21 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
js中获取事件对象的方法小结
2011/03/13 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
详解redux异步操作实践
2018/08/15 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python学习小技巧总结
2018/06/10 Python
python requests.post带head和body的实例
2019/01/02 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
便利店的创业计划书
2014/01/15 职场文书
大学生评语大全
2014/04/18 职场文书
2014年党课学习材料
2014/05/11 职场文书
发票退票证明
2015/06/24 职场文书
老人院义工活动感想
2015/08/07 职场文书
计算机教师工作总结
2015/08/13 职场文书
初三语文教学反思
2016/03/03 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
vue中div禁止点击事件的实现
2022/04/02 Vue.js