Использование CSS селекторов вместо Xpath

Использование CSS селекторов вместо Xpath

Сейчас CSS селекторы все больше набирают популярность в использовании и заменяют Xpath селекторы,все это конечно обусловлено скоростью выполнения(у CSS она значительно выше).

Вот небольшая шпаргалка:

Strategy	X Path	Sizzle(CSS)	Comments
Element	//div	div	locate first div element
By id	//div[@id='eleid']	div#eleid	Locate div with id eleid
By class	//div[@class='eleclass'] //div[contains(@class,'eleclass')]	div.eleclass	locate div with class name eleclass if more than one class exist then xpath 2 will be used
By attribute	//div[@title='Move mouse here']	div[title=Move mouse here] div[title^=Move] div[title$=here] div[title*=mouse]	you can use match operators for class and id as well, for example div[id^=menu-item]
Child	//div[@id='eleid']/* //div/h1	div#eleid >* div#eleid >h1
Descendant	//div[@id='eleid']//h1	div h1	Will work for //div/*/…../h1
By index	//li[6]	li:nth(5)	6th li element
By content	//a[contains(.,'Issue 1164')]	a:contains(Issue 1164)	Case Sensitive
By Child	//li[a[contains(.,'Issue 1244')]] //*[./a[contains(.,'Issue 1244')]] //ul[.//a[contains(.,'Issue 1244')]]	li{a:contains(Issue 1244)} ul{a:contains(Issue 1244)}	<ul><li> Improved alert on changing the format <a href=”">Issue 1244</a></li> <li>next sibling</li>…</ul> <h3>Listing 2</h3> <ul><li> Improved alert on changing the format <a href=”">Issue 1244</a></li> <li>next sibling</li>…</ul>
Next Sibling	//li[preceding-sibling::li[contains(.,'Issue 1244')]] //ul[preceding-sibling::ul[.//a[contains(.,'Issue 1244')]]]	css=li:contains(Issue 1244) + li css=ul{a:contains(Issue 1244)} ~ ul