【代碼筆記】Web-CSS-CSS組合選擇符

時間 2019-11-06

原文原文鏈接

一，效果圖。html

二，代碼。spa

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS 組合選擇符</title> <style> /*後代選擇器*/ div p { background-color: yellow; } /*子元素選擇器*/ div>p { background-color: green; } /*相鄰兄弟選擇器，選取了全部位於div元素後的第一個p元素*/ div+p { background-color: red; } /*普通相鄰兄弟選擇器,全部位於div元素的全部相鄰元素p*/ 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>

參考資料：《菜鳥教程》code

1. 【代碼筆記】Web-CSS-CSS組合選擇符
2. CSS 組合選擇符
3. css組合選擇符
4. CSS:組合選擇符
5. 【代碼筆記】iOS-單項選擇框
6. 對齊、組合選擇符、僞類
7. css選擇器---組合選擇器
8. CSS學習筆記之選擇符
9. 子選擇符、相鄰選擇符、兄弟選擇符、僞類選擇符
10. 公平選擇組合
更多相關文章...
• Markdown 代碼 - Markdown 教程
• Eclipse 代碼模板 - Eclipse 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• IntelliJ IDEA代碼格式化設置

相關標籤/搜索