CSS常见选择器

一、元素选择器

p,html,h1, h2

1、多个元素一起设置同一种风格， 则用逗号“，”隔开（选择器分组）

2、通配符选择，  *{Color:red}  表示文档中所有元素都为红色

 二、类选择器

对元素class属性值 class="classValue" 进行选择

1、  *.classValue1  表示选择 class值为 classValue1的所有元素；

2、 p.classValue2  表示class值为 classValue1的P元素（元素选择跟类选择搭配使用） 

三、ID选择器

在一个 HTML 文档中，id属性值是唯一的， 使用id选择，格式如下 <p id="idValue">……

#idValue 

四、属性选择器

1、a[href]   表示选择有包含 href属性的a元素 (属性选择习惯跟元素选择结合使用)

2、a[href][title]  表示选择同时含有 href属性 和 title属性的a元素

3、具体到属性值选择

   1）属性值完全匹配  a[href="www.baidu.com"][title="jennifer"]

   2）属性值部分匹配  a[href~="baidu.com"]

[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

  

 

 

 

 

 

 

五、后代选择器

 h1  em   表示 作为h1元素后代的任何em元素，注意，以空格隔开

 <h1>  <li><em>xxx  </em>  </li>  <em>xxx  </em> </h1>  后代选择器，两个元素之间的层次间隔可以是无限的，不论 em 的嵌套层次多深，都被选择

例如，要找到蓝色底纹位置，css语句可以为 css=ul[id^=personalizationDetail] ul>li:nth(1)    （nth序号从0算起）

  选择id包含personalizationDetail的ul元素 的后代 ul（隔了两代），接着找ul的第2个li子元素

 

六、子元素选择器

 使用大于号 > (子结合符)，例如：验证价格price，则：

assertText   css=ul.typeReview>li:nth(3)   Fee:$5.00

 

七、相邻兄弟选择器

 使用 + 号（相邻兄弟结合符）隔开两个元素，

 例1：table + ul  表示选择紧接在 table 元素后出现的所有兄弟 ul 元素

 例2：用一个结合符只能选择两个相邻兄弟中的第二个元素，例如：li + li {font-weight:bold;}，只对蓝色底纹部分起作用      

  

 

注：

selenium1.0元素选择器有：

1．id=id:

2．name=name:

3．link=textPattern 

4．dom=javascriptExpression:

5．xpath=xpathExpression:   见《xpath选择器》

6．css=cssSelectorSyntax

 

selenium2.0选择方法：

1. By.id()
2. By.className()
3. By.tagName()
4. By.name()
5. By.linkText()
6. By.partialLinkText()
7. By.xpath("xpath表达式")
8. By.cssSelector("css选择器")

本篇小结css，其他选择器小结待续……