方式一 后代或平級關系來選擇元素 :
父元素:
- (#)表示通過 id 屬性來定位元素
- (.)表示通過 class 屬性來定位元素
子元素(后代關系)
- #choose_car option 含空格的,后面的元素不必是前面元素的直接子元素,只要在父元素的里面
- .s_ipt_wr span
- #choose_car > option 含>鍵的, 后面的元素必須是前面元素的直接子元素
- .s_ipt_wr > span
- ul > ol > li > em 可以是很多級的父子關系
組合型
- #food > span , p 選擇id 為food的所有span子元素和所有的p(包括非food的子元素)
- #food > span , #food > p 選擇id為food的所有span子元素和所有p子元素
- #food > * 選擇id為food的所有子元素
兄弟節點的選擇 (平級關系)
- #food + div 只選擇id為food緊跟后面的div
- #food ~div 選擇id為food后面的div或div們,只需要在id的后面,不需要緊跟
方法二 根據元素的屬性及屬性值來選擇元素 :
- *[style] 選擇所有有stype屬性的元素
- p[spec=len2] 選擇spec屬性值只等於len2的p元素
- p[spec='len2 len3' ] 選擇spec屬性值只等於len2 len3的p元素 有空的值一定要加引號
- p[spec*='len2'] 選擇spec屬性值包含len2的p元素
- p[spec^='len2'] 選擇spec屬性值以len2開頭的p元素
- p[spec&='len2'] 選擇spec屬性值以len2結尾的p元素
- p[class=special][name=p1] 選擇class值等於special,並且name值等於p1的p元素
- p:nth-child(1) 選擇第一個p元素
- p:nth-last-child(1) 選擇倒數第一個p元素(要保證最后一個元素是p)