css相鄰選擇器設定li元素外邊距程式碼例項
關於相鄰選擇器的用法可以參閱CSS (E+F)相鄰選擇符一章節。
在實際應用中可能有這樣的情況,那就是統一設定一行li元素的左邊距,但是不希望第一個li元素有左邊距。
使用相鄰運算子就可以輕鬆實現此功能,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin:0px; padding:0px; } li { width: 100px; height: 100px; background-color: #eee; float: left; text-align:center; line-height:100px; list-style: none; } li + li { margin-left: 20px; } </style> </head> <body> <ul> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> <li>螞蟻部落五</li> <li>螞蟻部落六</li> </ul> </body> </html>
相關文章
- CSS設定元素邊框樣式例項程式碼CSS
- css匹配指定行li元素程式碼例項CSS
- css匹配第n個li元素程式碼例項CSS
- css中的外邊距合併時垂直方向上的普通流相鄰元素間CSS
- css程式碼中的加號(+)相鄰選擇器的作用CSS
- css屬性選擇器程式碼例項CSS
- CSS (E+F)相鄰選擇器CSS
- CSS匹配第一個li元素程式碼例項CSS
- css匹配最後一個li元素程式碼例項CSS
- CSS設定邊框為透明程式碼例項CSS
- css 兄弟選擇器簡單程式碼例項CSS
- margin外邊距疊加簡單程式碼例項
- :eq()選擇器匹配多個元素程式碼例項
- CSS3 相鄰兄弟選擇器 hoverCSSS3
- js獲取偽元素選擇器規定的內容程式碼例項JS
- js刪除li元素程式碼例項JS
- CSS中一些利用偽類、偽元素和相鄰元素選擇器的技巧CSS
- CSS 加號 (E+F) 相鄰選擇器CSS
- CSS 選擇器 - 帶例項CSS
- css選擇器,帶例項CSS
- js動態設定元素css樣式程式碼例項JSCSS
- 獲取指定元素下所有li元素程式碼例項
- jquery動態新增li元素程式碼例項jQuery
- css設定元素在瀏覽器中垂直水平居中程式碼例項CSS瀏覽器
- jQuery css()設定和獲取元素css屬性值程式碼例項jQueryCSS
- css使用偽物件選擇器設定元素內容CSS物件
- jQuery獲取指定的li元素程式碼例項jQuery
- jQuery調整li元素順序程式碼例項jQuery
- js刪除指定的li元素程式碼例項JS
- jQuery獲取所有的li元素程式碼例項jQuery
- javascript獲取li元素內容程式碼例項JavaScript
- jQuery獲取網頁中的元素距離文件邊緣的距離程式碼例項jQuery網頁
- CSS 負外邊距CSS
- CSS margin外邊距CSS
- CSS margin 外邊距CSS
- CSS 元素選擇器CSS
- css多重邊框程式碼例項CSS
- 網頁點選選擇設定文字不同顏色程式碼例項網頁