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> </div> <p>My best friend is Mickey.</p> <p>I will not be styled.</p> </body> </html>
普通相鄰兄弟選擇器：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div~p { background-color:yellow; } </style> </head> <body> <div> <p>段落 1。 在 div 中。</p> <p>段落 2。 在 div 中。</p> </div> <p>段落 3。不在 div 中。</p> <p>段落 4。不在 div 中。</p> </body> </html>
由效果可見，相鄰兄弟選擇器只對某一元素之後的第一個匹配的相鄰兄弟起作用，但是普通相鄰兄弟選擇器對相關元素之後的所有匹配的兄弟元素都起作用