CSS选择器语法&示例
CSS3 选择器
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
"CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)
选择器 | 例子 | 例子描述 | CSS |
---|---|---|---|
.class | .intro | 选择 class="intro" 的所有元素。 | 1 |
#id | #firstname | 选择 id="firstname" 的所有元素。 | 1 |
* | * | 选择所有元素。 | 2 |
element | p | 选择所有 <p> 元素。 | 1 |
element,element | div,p | 选择所有 <div> 元素和所有 <p> 元素。 | 1 |
element element | div p | 选择 <div> 元素内部的所有 <p> 元素。 | 1 |
element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 | 2 |
element+element | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。 | 2 |
[attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
[attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
[attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |
:link | a:link | 选择所有未被访问的链接。 | 1 |
:visited | a:visited | 选择所有已被访问的链接。 | 1 |
:active | a:active | 选择活动链接。 | 1 |
:hover | a:hover | 选择鼠标指针位于其上的链接。 | 1 |
:focus | input:focus | 选择获得焦点的 input 元素。 | 2 |
:first-letter | p:first-letter | 选择每个 <p> 元素的首字母。 | 1 |
:first-line | p:first-line | 选择每个 <p> 元素的首行。 | 1 |
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 | 2 |
:before | p:before | 在每个 <p> 元素的内容之前插入内容。 | 2 |
:after | p:after | 在每个 <p> 元素的内容之后插入内容。 | 2 |
:lang(language) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 | 2 |
element1~element2 | p~ul | 选择前面有 <p> 元素的每个 <ul> 元素。 | 3 |
[attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 | 3 |
[attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 | 3 |
[attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 | 3 |
:first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 |
:last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 |
:only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 |
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 | 3 |
:last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 |
:root | :root | 选择文档的根元素。 | 3 |
:empty | p:empty | 选择没有子元素的每个 <p> 元素(包括文本节点)。 | 3 |
:target | #news:target | 选择当前活动的 #news 元素。 | 3 |
:enabled | input:enabled | 选择每个启用的 <input> 元素。 | 3 |
:disabled | input:disabled | 选择每个禁用的 <input> 元素 | 3 |
:checked | input:checked | 选择每个被选中的 <input> 元素。 | 3 |
:not(selector) | :not(p) | 选择非 <p> 元素的每个元素。 | 3 |
::selection | ::selection | 选择被用户选取的元素部分。 | 3 |
1.大家在使用selenium元素定位的时候,通常更多使用的是XPATH,css定位方式用得比较少,但有时候css定位方式还是有一些优势的,
优势1:一般情况下定位速度要比XPATH快
优势2:语法要比XPATH更简洁
常见语法
* |
通用元素选择器,匹配任何元素 |
E |
标签选择器,匹配所有使用E标签的元素 |
.info |
class选择器,匹配所有class属性中包含info的元素 |
#footer |
id选择器,匹配所有id属性等于footer的元素 |
E,F |
多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 |
E F |
后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 |
E > F |
子元素选择器,匹配所有E元素的子元素F |
E + F |
毗邻元素选择器,匹配紧随E元素之后的同级元素F (只匹配第一个) |
E ~ F |
同级元素选择器,匹配所有在E元素之后的同级F元素 |
E[att='val'] |
属性att的值为val的E元素 (区分大小写) |
E[att^='val'] |
属性att的值以val开头的E元素 (区分大小写) |
E[att$='val'] |
属性att的值以val结尾的E元素 (区分大小写) |
E[att*='val'] |
属性att的值包含val的E元素 (区分大小写) |
E[att1='v1'][att2*='v2'] |
属性att1的值为v1,att2的值包含v2 (区分大小写) |
E:contains('xxxx') |
内容中包含xxxx的E元素 |
E:not(s) |
匹配不符合当前选择器的任何元素 |
例如这样一段html代码的网页
<div class="formdiv">
<form name="fnfn">
<input name="username" type="text"></input>
<input name="password" type="text"></input>
<input name="continue" type="button"></input>
<input name="cancel" type="button"></input>
<input value="SYS123456" name="vid" type="text">
<input value="ks10cf6d6" name="cid" type="text">
</form>
<div class="subdiv">
<ul id="recordlist">
<p>Heading</p>
<li>Cat</li>
<li>Dog</li>
<li>Car</li>
<li>Goat</li>
</ul>
</div>
</div>
匹配示例:
locator |
匹配 |
css=div css=div.formdiv |
<div class="formdiv"> |
css=#recordlist css=ul#recordlist |
<ul id="recordlist"> |
css=div.subdiv p css=div.subdiv > ul > p |
<p>Heading</p> |
css=form + div |
<div class="subdiv"> |
css=p + li css=p ~ li |
二者定位到的都是 <li>Cat</li> 但是storeCssCount的时候,前者得到1,后者得到4 |
css=form > input[name=username] |
<input name="username"> |
css=input[name$=id][value^=SYS] |
<input value="SYS123456" name="vid" type="hidden"> |
css=input:not([name$=id][value^=SYS]) |
<input name="username" type="text"></input> |
css=li:contains('Goa') |
<li>Goat</li> |
css=li:not(contains('Goa')) |
<li>Cat</li> |
2.css中的结构性定位
结构性定位就是根据元素的父子、同级中位置来定位,css3标准中有定义一些结构性定位伪类如nth-of-type,nth-child,但是使用起来语法很不好理解,这里就不做介绍了。
Selenium中则是采用了来自Sizzle的css3定位扩展,它的语法更加灵活易懂
Sizzle Css3的结构性定位语法
E:nth(n) E:eq(n) |
在其父元素中的E子元素集合中排在第n+1个的E元素 (第一个n=0) |
E:first |
在其父元素中的E子元素集合中排在第1个的E元素 |
E:last |
在其父元素中的E子元素集合中排在最后1个的E元素 |
E:even |
在其父元素中的E子元素集合中排在偶数位的E元素 (0,2,4…) |
E:odd |
在其父元素中的E子元素集合中排在奇数的E元素 (1,3,5…) |
E:lt(n) |
在其父元素中的E子元素集合中排在n位之前的E元素 (n=2,则匹配0,1) |
E:gt(n) |
在其父元素中的E子元素集合中排在n位之后的E元素 (n=2,在匹配3,4) |
E:only-child |
父元素的唯一一个子元素且标签为E |
E:empty |
不包含任何子元素的E元素,注意,文本节点也被看作子元素 |
匹配示例:
例如还是段的代码
<div class="subdiv">
<ul id="recordlist">
<p>Heading</p>
<li>Cat</li>
<li>Dog</li>
<li>Car</li>
<li>Goat</li>
</ul>
</div>
locator |
匹配 |
css=ul > li:nth(0) |
<li>Cat</li> |
css=ul > *:nth(0) css=ul > :nth(0) |
<p>Heading</p> |
css=ul > li:first |
<li>Cat</li> |
css=ul > :first |
<p>Heading</p> |
css=ul > *:last css=ul > li:last |
<li>Goat</li> |
css=ul > li:even |
Cat, Car |
css=ul > li:odd |
Dog, Goat |
css=ul > :even |
<p>Heading</p> |
css=ul > p:odd |
[error] not found |
css=ul > li:lt(2) |
<li>Cat</li> |
css=ul > li:gt(2) |
<li>Goat</li> |
css=ul > li:only-child css=ul > :only-child css=ul > *:only-child |
[error] not found (ul没有only-child) |
css=div.subdiv > :only-child |
<ul id="recordlist"> … … … … </ul> |
CSS选择器语法&示例的更多相关文章
- CSS 选择器语法参考手册
转自:http://www.w3school.com.cn/cssref/css_selectors.asp CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. &quo ...
- css选择器语法速查
通用选择器 *{} 类似于通配符,匹配文档中所有元素类型: 类型选择器 h1,h2,p{} 匹配以逗号隔开元素列表中的所有元素 类选择器 .glass{} or p.glass{} id选择器 #id ...
- 【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器
[网络爬虫入门04]彻底掌握BeautifulSoup的CSS选择器 广东职业技术学院 欧浩源 2017-10-21 1.引言 目前,除了官方文档之外,市面上及网络详细介绍BeautifulSoup ...
- pyspider 爬虫教程(一):HTML 和 CSS 选择器
虽然以前写过 如何抓取WEB页面 和 如何从 WEB 页面中提取信息.但是感觉还是需要一篇 step by step 的教程,不然没有一个总体的认识.不过,没想到这个教程居然会变成一篇译文,在这个 ...
- C#使用CSS选择器抓取页面内容
最近在查wpf绘图资料时,偶然看到Python使用CSS选择器抓取网页的功能.觉得很强,这里用C#也实现一下. 先介绍一下CSS选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. ...
- 如何利用CSS选择器抓取京东网商品信息
前几天小编分别利用Python正则表达式.BeautifulSoup.Xpath分别爬取了京东网商品信息,今天小编利用CSS选择器来为大家展示一下如何实现京东商品信息的精准匹配~~ CSS选择器 目前 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- CSS(1)---css语法、css选择器
CSS(1)---css语法.css选择器 一.CSS语法 1.CSS语法 CSS 规则由两个主要的部分构成:选择器以及一条或多条声明. 属性 是您希望设置的 样式属性.每个属性有一个属性值.属性和属 ...
- CSS 高级语法 ---- 继承和选择器的分组
1. 选择器的分组 ————————————————————————— 可以对选择器进行分组,被分组的选择器享用共同的声明. h1,h2,h3,h4,h5,h6 { color: green; ...
随机推荐
- ASP.NET Web API编程——版本控制
版本控制 版本控制的方法有很多,这里提供一种将Odata与普通web api版本控制机制统一的方法,但也可以单独控制,整合控制与单独控制主要的不同是:整合控制通过VersionController ...
- phpstudy 出现You don't have permission to access / on this server.
You don't have permission to access / on this server. 去掉vhost文件中的Options FollowSymLinks ExecCGI 第一次发 ...
- 使用ITextSharper小结
用到了生成PDF版的合同,上网研究了一圈,发现不需要服务器端安装插件的,比较好用的就是这个ITextSharper了,于是便开始了研究. 1.解决汉字不显示的问题,指定一下字体,默认的字体好像不支持中 ...
- ZooKeeper系列(1)--分布式系统的基石
分布式架构有以下几点普适性的共性需求: 1. 提供集群的集中化的配置管理功能,可以不重启就让新的配置参数生效,类似与配置中心 2. 简单可靠的集群节点动态发现机制,便于动态发现服务,动态扩展 ...
- 系统优化怎么做-JVM优化之VisualVM
大家好,这里是「聊聊系统优化 」,并在下列地址同步更新 博客园:http://www.cnblogs.com/changsong/ 知乎专栏:https://zhuanlan.zhihu.com/yo ...
- iOS之创建通知、发送通知和移除通知的坑
1.创建通知,最好在viewDidLoad的方法中创建 - (void)viewDidLoad { [super viewDidLoad]; //创建通知 [[NSNotificationCenter ...
- java读取xml文件的四种方法
Xml代码 <?xml version="1.0" encoding="GB2312"?> <RESULT> <VALUE> ...
- MySQL数据库 : 基本语句
mysql -uroot -p 登陆数据库 select now(); 显示当前时间 \q 退出 show databases; 显示数据库 create database 数据库名 charset= ...
- PHP中call user func()和call_user_func_array()调用自定义函数小结
call_user_func() 和 call_user_func_array(),通过传入字符串函数,可以调用自定义函数,并且支持引用,都允许用户调用自定义函数并传入一定的参数: 1.mixed c ...
- hibernate的报错信息a different object with the same identifier value was already associated with the session解决办法
废话不多说,直接说原因,这是在hibernate中,有2个相同类型的实体类具有同样的主键标识符,然后调用update或者调用saveOrUpdate,我朋友出这个错的由于他想要update一条数据时, ...