*CSS选择器：
''''
CSS选择器：
1-子元素选择器
使用场景
不同于后代选择器，只选择同一父元素的直接子元素
2-Tips
后代元素：所有具有相同祖先的元素（包括子元素）
子元素：所有具有相同parent的元素（范围小于后代元素）
表示方法
<s1>大于号<s2>
S1与s2是父子关系
示例：#choose_car >option
表示选择id=choose_car下面的所有option子元素
4-扩展：
连续使用
#many>div>p.special
元素之间不存在越级
与后代选择器组合使用
#many p>span
#many和p 之间存在越级
训练
lesson04/s1.html
http://www.w3school.com.cn/tiy/t.asp?f=csse_selector_child
或者使用51job,网易云音乐的页面训练元素定位
5-相邻兄弟元素选择器
使用场景
同一父元素的相邻子元素,两者挨在一起
表示方法
<s1>+<s2>
<s1>与<s2>是同级关系并且紧靠一起
示例：#food + div
6-扩展
#many p.special + p
匹配到一个结果：紧靠#many p.special元素的P元素
训练
lesson04/s1.html
http://www.w3school.com.cn/tiy/t.asp?f=csse_selector_adjacent_sibling_2
或者使用51job,网易云音乐的页面训练元素定位
7-非相邻兄弟元素选择器
使用场景
同一父元素的子元素,元素之间没有紧靠在一起
表示方法
<s1>~<s2>
<s1>与<s2>是同级关系，无需紧靠一起
示例：#food ~ div
扩展
#many p.special ~ p
匹配到多个结果：与#many p.special元素同级的p元素
训练
lesson04/s1.html
http://www.w3school.com.cn/tiy/t.asp?f=csse_selector_adjacent_sibling_2
或者使用51job,网易云音乐的页面训练元素定位
8-属性选择器（重要）
使用场景
选择具有某个属性（值）的元素
表示方法
*[属性=”属性值”]
*表示任意元素标签名，如p, div,li,button,等等
通常属性值没有空格或特殊字符，可以不加引号
示例：
*[style] #具有style属性的任意元素
p[spec=len2] #属性spec=len2的p元素
p[spec='len2 len3'] #属性spec='len2 len3'的p元素 ，len2 len3之间存在空格所以加引号
扩展
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
与后代选择器结合
#many p[name=p1]
与兄弟选择器结合
#food>span+p[class=vegetable]
训练
lesson04/s1.html
http://www.w3school.com.cn/tiy/t.asp?f=csse_selector_attribute_value_3
或者使用51job,网易云音乐的页面训练元素定位
9-组选择器
使用场景
当一组选择器无法选择我们需要的元素，可以通过多组选择器来选择元素
表示方法
<s1>,<s2>
<s1>与<s2>表示两组不同的css选择器
示例：
div,span,p
同时选择所有div,span,p元素
扩展
#food > span ,p
表示选择 id为food的的所有span子元素 和 所有的p
#food > span, #food > p
表示选择 id为food的的 所有span子元素 和 所有的p子元素
训练
lesson04/s1.html
http://www.w3school.com.cn/tiy/t.asp?f=csse_grouping
或者使用51job,网易云音乐的页面训练元素定位
10-伪类nth-child,nth-of-type：
使用场景
根据下标选择子元素，下标从1开始
表示方法
<s1>:nth-child(n) #从<s1>中选择第n个元素，且<s1>表示的元素必须位于父元素的第n位
<s1>:nth-of-type(n) #从<s1>中选择第n个元素，对<s1>表示的元素处于第几位没有要求
n>1
<s1>表示一组选择器
示例：
p:nth-child(3)
选择其父元素下的第三个元素，元素类型必须是P
p:nth-of-type(3)
选择其父元素下的第三个p类型的元素，对于p元素位置没有要求
扩展
#food > span:nth-child(2)
选择#food元素下第二个元素，该元素必须是span类型
#food > p:nth-child(2)
选择#food元素下第二个p元素
训练
lesson04/s1.html
或者使用51job,网易云音乐的页面训练元素定位
'''''
