CSS学习04之层次选择器
生活随笔
收集整理的這篇文章主要介紹了
CSS学习04之层次选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
回顧
什么是選擇器在 CSS 中，選擇器是選取需設置樣式的元素的模式。
選擇器的作用CSS 選擇器用于“查找”（或選取）要設置樣式的 HTML 元素。
方便我們對元素添加樣式。
層次選擇器
基本選擇器又分為三種方式：
示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>層次選擇器</title><style><!--標簽選擇器-->p{background: #148aff;}/*后代選擇器：在選定元素后面的所有某元素*/body p{background: deeppink;}/*子選擇器：在某選定元素后面一代的某元素*/body>p{background: red;}/*相鄰兄弟選擇器：對下不對上且不包括自己*/.action+p{background: green;}/*通用兄弟選擇器:對下不對上且不包括自己*/.active~p{background: purple;}</style> </head> <body> <p>p0</p> <p class="active">p1</p> <p>p2</p> <p>p3</p> <ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li> </ul> <p class="action">p7</p> <p>p8</p> </body> </html>效果
小結
層次選擇器顧名思義是有層次的感覺，從以上代碼不難看出！
作者有話說
博客創作不易，希望看到這里的讀者動動你的小手點個贊，如果喜歡的小伙伴可以一鍵三連，作者大大在這里給大家謝謝了。
總結
以上是生活随笔為你收集整理的CSS学习04之层次选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS学习03之基本选择器
- 下一篇： CSS学习05之结构伪类选择器