兄弟选择器 + 和 ~

来源:转载

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>div+div</title> 6 <style> 7 /*只选择 li 下的div的相邻兄弟节点 */ 8 li div+div { 9 background-color: red;10 }11 12 /*选择div 下的 所有p标签*/13 div~p{14 background-color: pink;15 }16 </style>17 </head>18 <body>19 <ul>20 <li>21 <div>1</div>22 <p>1</p>23 <div>2</div>24 <div>3</div>25 </li>26 </ul>27 28 <div>1</div>29 <p>2</p>30 <span>3</span>31 <p>4</p>32 33 </body>34 </html>

没什么好讲的,写一遍意会一下 就知道了

分享给朋友:
您可能感兴趣的文章:
随机阅读: