Selenium学习笔记||九、CSS选择器选择元素

一、 什么是CSS选择器

元素是有属性的

<a href="http://baidu.com" id="baidulink">转到百度<a>

<div style="margin-top:10px">----------------------内联样式

==========================================

<style type="text/css">

.main1{

}

---------------可以选择class为main1的元素，使用这个样式

 

二、选择元素的方法 tag/id/class

 

A. 根据标签名

　　aaa {color:red;}-----选择所有tag名为aaa 的

B. 根据ID

　　#bbb {color:red;}-----选择所有id名为bbb 的

C. 根据class

　　.ccc{color:red;}-----选择所有class名为ccc 的

D. 根据tag名和class组合写（如果多个）

　　aaa.ccc{color:red;}----选择所有tag名为aaa，同事class名为ccc 的

 

三、后代选择器

选择元素内部的元素

语法：

<s1>（空格）<s2>

　　选择s1元素里边所有的s2元素

　　可以是直接节点，也可以不是

　　可以是多级

例子：

　　#choose_car option

　　footer p（都是tag）

　　footer .p（第一个是tag，第二个是class）

 

四、子元素选择器

 选择元素的子元素

语法：

<s1> > <s2>

　　是直接节点

　　可以是多级

例子：

　　#choose_car > option

　　footer > p

 

五、 组选择

同时选择多个元素，逗号分开两个css表达式

语法：

<s1>， <s2>

例子：

　　p, button

　　#food, .cheese

　　#food> *-------------------id为food下的所有类型的元素

 

六、兄弟节点选择

选择紧接在另一个元素后的元素，二者有相同的父元素

 

例子：

　　#food + div

　　#many > div > p.special + p

 

选择在另一个元素后的元素，二者有相同的父元素

 

例子：

　　#food ~ div

 

七、属性选择器

a[class=specail][name=p1]-----------------指需要同时满足两个属性

 

 

 

 

http://www.w3school.com.cn/cssref/css_selectors.asp

 

八、伪类选择

p:nth-child(n)-----选择属于其父元素的第n个子元素的每个 <p> 元素。

p:nth-of-type(n)-----选择属于其父元素第n个 <p> 元素的每个 <p> 元素。

:not(p)-----选择非 <p> 元素的每个元素。