后代选择器 ： descendant selector
可选择某些元素后代的元素
#header span
子元素选择器 -">" : 用于匹配那些其他元素的直接后辈,属于CSS2
body > p{color:red;} <body> <p>内容</p> <div> <p>内容</p> </div> </body>
只有第一个匹配,第二个P是DIV的下级,因此是BODY的孙级,就不匹配了
相邻兄弟节点选择器： Adjacent sibling selector
h1 + p {margin-top:5px;} 在紧接在h1元素后出现的段落上加上边距 <div> <ul> <li>List item 1</li> <li>List item 2</li> //粗体 <li>List item 3</li> //粗体 </ul> <ol> <li>List item 1</li> <li>List item 2</li> //粗体 <li>List item 3</li> //粗体 </ol> </div>
用一个结合符只能选择两个相邻兄弟中的第二个元素： 上面的选择器只会把列表中的第二个列表项变为粗体