div p :将所有<div>标签里面的<p>标签选中(子标签和孙子辈标签)
<style> div span{color:red;} </style> <div> <p> <span> Hello World! </span> </p> <span> Study Css </span> </div> 上面的例子中所有的span都为红色
div>p :将所有<div>标签的子标签<p>选中,不包括孙子辈标签。
<style> div>span{color:red;} </style> <div> <p> <span> Hello World! </span> </p> <span> Study Css </span> </div> 这个例子中只有Study Css是红色!
div+p :将所有离<div>相邻的<p>标签选中
<style> div + p{color: blue;} /*div后面紧跟着的第一个p标签(必须是紧邻的标签)*/ </style> <div>hello</div> <p>world</p> 这个例子中world字体是蓝色!
div~p :将<div>后面所有的<p>标签选中
<style> div~p{color: orange;} </style> <div>第一段</div> <p>p标签</p> <p>p标签</p> 这个例子中所有p标签字体都是橙色!
div.a :将<div>下class=a标签选中
<style> div.a{color: green} </style> <div class="a">hello world</div> 这个例子中hello world字体是绿色!
p,span :将p和span选中
<style> p,span{color: green} </style> <p>驾驶、行驶</p> <span>记分查询</span> 这个例子中p和span字体是绿色!