CSS學習——後代選擇器
阿新 • • 發佈：2018-12-22
前言
前面給大家分享了多元素選擇器，這裡給大家分享後代選擇器。
後代選擇器
後代選擇器是指選擇某個元素包裹的所有元素，需要運用到空格來選擇。下面通過具體的程式碼來看一下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { width: 100px; height: 100px; border: 1px solid red; } /*選中.box 下面的所有後代為p元素的元素 特點：可以影響.box 後面很多層*/ .box p{ color: red; } .box span{ color: green; } </style> </head> <body> <div class="box"> <p>p1</p> <h1>h1</h1> <div> <span>span</span> <p>p2</p> <div> <p>p3</p> </div> </div> </div> </body> </html>
上面程式碼中.box p{} 和.box span{}來選中div元素包裹的p、span元素。