起源
- 用 ruby 的 nokogiri(看名字就是日语音译啊)解析网页的时候, 发现给了两种选择器: xpath, css-selector, xpath 看了看不对口味, 就学习 css-selector 吧
- ps 本文基本摘自阮一峰老师的博客, 本来想自己写的, 网上搜资料, 看到这篇, 觉得再写也写不了这么好, 做了一些小小的勘误, 原文地址CSS选择器笔记
正文
基本选择器
- * 通用元素选择器, 匹配任何元素
- E 标签选择器, 匹配所有使用 E 标签的元素
- .info class 元素选择器, 匹配所有 class 属性中包含 info 的元素
- # id 选择器, 匹配所有 id = footer 的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16* { 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; }
多元素的组合选择器
- E, F 多元素选择器, 同时匹配所有的 E, F 元素, 元素间用逗号分割
- E F 后代元素选择器, 匹配所有属于 E 元素后代的 F 元素, E 和 F 之间用空格分离
- E > F 子元素选择器, 匹配所有属于 E 元素后代的 F 元素
- E + F 毗邻元素选择器, 匹配所有紧跟 E 元素之后的同级元素 F
- E ~ F 匹配任何在 E 元素之后的同级 F 元素
1 | div p { color:#f00; } |
属性选择器
- E[att] 匹配所有具有 att 属性的元素, 不考虑它的值, E 在此处可以省略
- E[att=”val”] 匹配所有 att 属性等于 val 的 E 元素
- E[att~=”val”] 匹配所有 att 属性具有多个空格分隔的值、其中一个值等于”val”的E元素
- E[att|=”val”] 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以”val”开头的E元素,主要用于lang属性,比如”en”、”en-us”、”en-gb”等等
- E[att^=”val”] 属性值以 val 开头的元素
- E[att$=”val”] 属性值以 val 结尾的元素
- E[att*=”val”] 属性值 att 的值包含 val 字符串的元素
1
2
3
4
5
6
7
8
9
10
11p[title] { color:#f00; }
div[class="error"] { color:#f00; }
td[headers~="col1"] { color:#f00; }
p[lang|="en"] { color:#f00; }
blockquote[class="quote"][cite] { color:#f00; }
div[id^="nav"] { background:#ff0; }
伪元素
- E::first-line 匹配 E 元素的第一行
- E::first-letter 匹配 E 元素的第一个字母
- E::before 在 E 元素之前插入生成的内容
- E::after 在 E 元素之后插入生成的内容
1 | p::first-line { |
伪类选择器
- E:link 匹配所有未被点击的链接
- E:visited 匹配所有点击过的链接
- E:active 匹配鼠标在其上按下, 还没有释放的 E 元素
- E:hover 匹配鼠标悬停其上的 E 元素
- E:focus 匹配获得当前焦点的 E 元素
- E:lang(c) 匹配 lang 属性等于 c 的 E 元素
- E:enableed 匹配表单中激活的元素
- E:disabled 匹配表单中未激活的元素
- E:checked 匹配表单中被选中的 radio 或 checkbox
- E::selection 匹配当前用户选中的元素
1
2
3
4
5
6
7
8
9
10
11
12p: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"; }
input[type="text"]:disabled { background:#ddd; }
结构性伪类
- E:first-child 匹配作为第一个子元素的 E 元素
- E:root 匹配文档的根元素, 就是对整个网页设置
- E:nth-child(n) 匹配 E 元素作为父亲的第 n 个子元素, 从 1 开始
- E:nth-last-child(n) 匹配 E 元素作为父亲的倒数第 n 个子元素, 从 1 开始
- E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
- E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
- E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
- E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
- E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
- E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
- E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
- E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19p: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; }
补充
当选择器结合使用时一定要要注意空格, 下面两种选择器选择的是不同的内容
1
2div:first-child {}
div :first-child {}通过组合 css 选择器可以灵活快速的提取网页中想要的内容, 与正则结合使用效果更佳
关于 css 选择器的实际作用可以看这个问题 nokogiri + mechanize css selector by text
关于 css 选择器还有优先级问题, 欢迎留言