當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css-层次选择器

發布時間：2024/9/27 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 css-层次选择器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、后代選擇器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/* 后代選擇器 */body ul p{background: red;}body p{background: yellow;}</style> </head> <body>p1p2p3<ul><li>p4</li><li>p5</li><li>p6</li></ul> </body> </html>

二、子選擇器

/* 子選擇器 */ body>p{background: #12ec4e; }

三、相鄰兄弟選擇器–向下選擇第一個

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/* 相鄰兄弟選擇器：只有一個，對下不對上 */.active + p{background: green;}</style> </head> <body>p1p2p3<ul><li>p4</li><li>p5</li><li>p6</li></ul> </body> </html>

四、通用兄弟選擇器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/* 通用兄弟選擇器，當前選中元素的向下的所有兄弟元素 */.active~p{background: red;}</style> </head> <body>p1p2p3<ul><li>p4</li><li>p5</li><li>p6</li></ul>p7 </body> </html>

https://www.bilibili.com/video/BV1YJ411a7dy?p=6

總結

以上是生活随笔為你收集整理的css-层次选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Excel 数据导入到Access数据库
下一篇： Access中编写VBA代码时，如何区分