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,其他选择器小结待续……

原文地址:https://www.cnblogs.com/jenniferhuang/p/3392095.html