CSS學習——相鄰選擇器
阿新 • • 發佈:2018-12-26
前言
前面我有分享到學習到了3個選擇器,這裡給大家分享一下其他的選擇器。
相鄰選擇器
相鄰選擇器是指選擇某個元素後面相鄰的元素
,運用到的符號是+
。下面通過例項來演示一下:
<!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{ color: red; } </style> </head> <body> <div class="box">box1</div> <p>p1</p> <p>p2</p> </body> </html>
上面的程式碼,需求是我們只需要改變p1
的顏色,如果用標籤選擇器
選擇的範圍就會很大也符合我們的需求,所以我們用相鄰選擇器就寫出我們需要的效果。
需要的注意的是:相鄰選擇器只對兩個相鄰的元素有效。