方式一 后代或平级关系来选择元素 :
父元素:
- (#)表示通过 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)