css比较特殊选择器汇总(持续更新)
生活随笔
收集整理的這篇文章主要介紹了
css比较特殊选择器汇总(持续更新)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1、css選擇器中加號(+)是啥意思?
加號(+)為:相鄰同胞選擇器,如果需要選擇緊接在另一個元素后的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器(Adjacent sibling selector)
? ? ? ?如圖:
? ? ? ?我們經(jīng)常見到頁面上方的導航,用“/”分隔開,這個時候我們就可以考慮使用相鄰兄弟同胞選擇器,
? ? ? ?樣式寫法類似如:li+li:before {padding: 0 5px;color: #ccc;content: "/\00a0";},表示li的緊接的li的前面加入樣式‘/’,并且這兩個li有共同的父元素。所以除了第一個外其他的li的前面都會加入‘/’,(這里用到了before,可以看我的另一篇博客,關于before after偽元素的介紹。https://www.cnblogs.com/lixianfu5005/p/9411250.html)。
? ? ? 上述圖片樣式完整代碼如下:
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>checkbox css change</title><style type="text/css">.breadcrumb>li {display: inline-block;}.breadcrumb>li+li:before {padding: 0 5px;color: #ccc;content: "/\00a0";}</style> </head><body><ol class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">class0</a></li><li><a href="#">class1</a></li><li><a href="#">class2</a></li><li><a href="#">class3</a></li><li class="active">Data</li></ol></body></html> View Code?
?后續(xù)會繼續(xù)更新特殊的css選擇器。
?
轉載于:https://www.cnblogs.com/lixianfu5005/p/9458232.html
總結
以上是生活随笔為你收集整理的css比较特殊选择器汇总(持续更新)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: MVC5+EF6 入门完整教程11--细
- 下一篇: [CEOI2008] order