一、CSS簡介
CSS 指層疊樣式表 (Cascading Style Sheets)
CSS 選擇器參考手冊：http://www.w3school.com.cn/cssref/css_selectors.asp
二、定位實例
1、以如下html定位爲例：
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> css locate </title>
</head>
<body>
<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">
<a href="http://www.baidu.com" id="baiduUrl">baidu</a>
<ul id="recordlist">
<p>Heading</p>
<li>Cat</li>
<li>Dog</li>
<li>Car</li>
<li>Goat</li>
</ul>
</div>
</div>
</body>
</html>
</span>
2、CSS匹配實例：
| cssSelector | 匹配 |
| css=div | <div class="formdiv"> |
| css=div.formdiv | <div class="formdiv"> |
| css=#recordlist css=ul#recordlist |
<ul id="recordlist"> |
| css=div.subdiv p | <p>Heading</p> |
| css=div.subdiv>ul>p | <p>Heading</p> |
| css=form+div | <div class="subdiv"> |
| css=p+li | <li>Cat</li> |
| css=p~li | <li>Cat</li> 得到4個li中的第一個 |
| css=form>input[name=username] | <input name="username" type="text"></input> |
| css=input[name$=id][value^=SYS] | <input value="SYS123456" name="vid" type="text"> |
| css=input[value*='SYS'] | <input value="SYS123456" name="vid" type="text"> |
| css=a:link | <a href="http://www.baidu.com">baidu</a> |
| css=input:first-child | <input name="username" type="text"></input> |
| css=input:last-child | <input value="ks10cf6d6" name="cid" type="text"> |
| css=li:nth-child(2) | <li>Cat</li> 因爲這個li是ul下的第二個元素，所以是child（2） |
| css=:root | <html> |
csdn表格不顯示邊框，所以截個圖好看點：
三、XPATH和CSS定位比較
還是以上面的html爲例：
| 定位方式 | XPath | CSS |
| 標籤 | //div | div |
| By id | //div[@id='recordlist'] | div#recordlist |
| By class | //div[@class='subdiv'] //div[contains(@class,'subdiv')] |
div.subdiv |
| By 屬性 | //input[@name='username'] | input[name=username] input[name^=user] input[name$=name] input[name*=erna] |
| 定位子元素 | //ul[@id='recordlist']/* //ul/p |
ul#recordlist>* ul#recordlist>p |
| 定位後代元素 | //div[@class='subdiv']//p | div p |
| By index | //li[4] 定位第四個li | li:nth-child(5) |
| By content | //li[contains(text(),'Goa')] | li contains('Goa') 該方法 已經廢棄 |
| 根據子元素回溯定位父元素 | //*[./a[@id='baiduUrl']] //div[.//p[text()='Heading']] 匹配到：<div class="subdiv"> |
？ |
| 根據兄弟元素定位 | //ul[preceding-sibling::a[@id='baiduUrl']] //ul[preceding-sibling::a[//div[@class='subdiv']/a]] 都匹配到：<ul id="recordlist"> |
a+ul a#baiduUrl+ul 匹配到：<ul id="recordlist"> |
截圖如下：
注意：根據兄弟元素定位時只能從上面的兄弟找下面的兄弟，如：css=p+li，寫成li+p是不行的。
可以看到，CSS定位語法比XPath更爲簡潔、靈活，而且CSS定位的速度還比XPath快，推薦使用CSS定位