css选择器

CSS选择器是浏览器用来选择元素的，执行效率高

根据tag 标签名 eg: p　　选择标签中为p

根据id #id eg: #food

根据class .类名 eg: .cheese　

根据tag和class的组合： span.vegetable　　选择tag为span且class为vegetable的元素

 

tips:<span class="vegetable food">...是指同时拥有vegetable和food两个class属性

 

后代选择器：descendant

选择元素内部的元素 1. 选择S1元素里所有的S2元素 2 可以是直接子节点， 也可以不是 3 可以有很多级

css语法： s1 s2

xpath写法：　//s1//s2

 

选择元素的子元素：option 是choose_car的直接子节点

eg: #choose_car > option

xpath用的是 //*[id='choose_car ']/option

 

可以有很多层： a > b > c >d

与后代选择器不同， 后代选择器可以不是后代直接子节点： choose_car option

子元素与后代选择器可以同时使用

 

同时选择多个子元素 组（group）选择, css用逗号，　xpath用“｜”

p,button 同时选择tag为p或者button的所有子元素

#food,.cheese 同时选择id为food或者class为.cheese的所有子元素

#food>span, p同时选择#food>span或者 标签为p的所有子元素

#food>span,#food>p 同时选择id为food下标签为span和p的所有子元素

#food>* 选择id为food的所有子元素

 

兄弟节点选择 +

选择紧接在一个元素后的另一个元素， 他们有共同的父节点

#food+div id为food的下一个兄弟元素，共同父节

#many > div >p.special+p

#food ~ select 选择food的兄弟元素，不需要紧接的， 他们有共同的父节点

 

支持food ~ *吗？？？？

 

属性选择器： 属性值如果没有空格， 逗号等特殊字符的， 属性值可以不加引号

有两个元素：

<p spec='len2'>text1</p>

<p spec='len2 len3'>text2</p>

*[style] 选择所有有style属性的元素

p[spec=len2] －－text1 被选择。所有tag为p并且有spec属性且spec属性为len2的元素 用属性选择时， 属性值必须完全相等。 如果属性有两个值， 只符合一个，不会被选择。

p[spec=‘len2 len3’] -text1 text2都被选择

p[spec*='len2']两个被选择 选择所有tag为p并且有spec属性且spec属性包含len2的元素

p[spec^='len2'] 两个被选择 以len2开头

p[spec$='len2'] text1被选择 以len2结尾

p[class=special][name=p1]以p开头， 同时满足这两个条件的元素

p:nth-child(2)选择的是p元素，限定是其父节点的第二个子节点

p:nth-last-child(2) 选择的是p元素，限定是其父节点的倒数第二个子节点

p:nth-of-type(2) 选择是p类型的第二个子节点

#food > p:nth-of-type(2) food的类型为p的第二个子元素

#food:not(p) 选择food中所有不是p类型的节点

 

<input id="fromStation" type="hidden" value="NKH" name="leftTicketDTO.from_station">

type为hidden的元素定位不到