CSS後代選擇器和子元素選擇器的區別
阿新 • • 發佈：2018-12-26
其實後代選擇器和子元素選擇器，單單在字面上來看，並不能看出什麼卻別，總結一下可以這麼說，後代選取器匹配先關元素的所有後代元素，但是子元素選擇器只選擇氣直接子元素。比如如下例子，上程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div p { background-color:yellow; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <div> <h2>My name is Donald</h2> <p>I live in Duckburg.</p> <p>I live in Duckburg.</p> </div> <div> <span><p>I will not be styled.</p></span> </div> <p>My best friend is Mickey.</p> </body> </html>
其效果是這樣的：
但是子元素選擇器的效果是這樣的：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div>p { background-color:yellow; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <div> <h2>My name is Donald</h2> <p>I live in Duckburg.</p> <p>I live in Duckburg.</p> </div> <div> <span><p>I will not be styled.</p></span> </div> <p>My best friend is Mickey.</p> </body> </html>
通過程式碼和相關效果 相信肯定看出區別在哪裡了