CSS 匹配後面所有兄弟元素
下面分享一段程式碼例項,實現匹配指定元素後面所有的兄弟元素的效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #items{ width:900px; height:auto; margin:0 auto; padding:5px 0; clear:both; } #items ul, #items li{ list-style:none; } #items li{ width:500px; height:28px; text-align:left; padding-left: 0px; line-height:28px; border-bottom:dashed 1px #CCC; cursor:pointer; } .first ~ li{ color:red; } </style> </head> <body> <div id="items"> <ul> <li class="first">螞蟻部落歡迎您,只有努力奮鬥才會有美好的未來</li> <li>沒有任何人一開始就是高手,必須要好好學習</li> <li>本站的url地址是softwhy.com</li> <li>每一天都是新的,所以要好好真心當前時間</li> <li>div css教程裡面有大量詳實的程式碼</li> </ul> </div> </body> </html>
上面程式碼可以將class屬性值為first的li元素後面的所有裡元素的字型顏色設定為紅色。
~選擇器可以參閱CSS 兄弟選擇符(E~F)一章節。
相關文章
- css匹配後面的所有兄弟元素CSS
- jQuery獲取li元素後面所有兄弟元素jQuery
- CSS 獲取所有緊鄰兄弟元素CSS
- jQuery獲取元素前面所有兄弟元素jQuery
- jQuery獲取所有兄弟元素jQuery
- CSS下一個兄弟元素CSS
- CSS 匹配指定name元素CSS
- CSS 緊鄰下一個兄弟元素CSS
- css匹配最後一個li元素程式碼例項CSS
- css獲取指定元素的兄弟元素程式碼例項CSS
- css匹配指定索引的li元素CSS索引
- css匹配第n個li元素CSS
- JavaScript所有後代元素JavaScript
- css匹配指定元素的子元素程式碼例項CSS
- CSS 匹配第一個li元素CSS
- css 獲取從第n個開始,之後的所有元素CSS
- css如何匹配倒數第n個元素CSS
- css匹配具有指定屬性值的元素CSS
- JavaScript在指定元素後面插入元素JavaScript
- css實現匹配具有指定屬性的元素CSS
- css匹配指定行li元素程式碼例項CSS
- CSS匹配指定li元素並設定樣式CSS
- css匹配第n個li元素程式碼例項CSS
- css匹配第n個子元素程式碼例項CSS
- css匹配type屬性值為text的input元素CSS
- JavaScript 獲取所有後代元素節點JavaScript
- CSS匹配第一個li元素程式碼例項CSS
- jQuery如何獲取當前元素的兄弟元素jQuery
- 獲取頁面中所有元素的節點型別型別
- js獲取頁面中所有元素程式碼例項JS
- 用 CSS 隱藏頁面元素的 5 種方法CSS
- css 樣式——後面覆蓋前面CSS
- 原生javascript實現獲取指定元素下所有後代元素程式碼例項JavaScript
- 獲取當前元素在兄弟元素節點中的索引索引
- CSS E~F 兄弟選擇器CSS
- js如何元素當前元素所有的父元素JS
- 使用CSS定義頁面元素的外觀樣式CSS
- CSS擷取字串後面帶省略號CSS字串