【代码笔记】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代码格式化设置