分類彙整：CSS

CSS vs jQuery 名稱 CSS jQuery 第一個元素 :first-child :first, :first-child 最後一個元素 :last-child :last, :last-child 偶數的元素 :nth-child(even) :even 奇數的元素 :nth-child(odd) dd 大於給定索引值的元素 :nth-child(n+2) :gt(0) 小於給定索引值的元素 :nth-child(-1n+8) :lt(2) :nth-child(n) 裡面算數學 :nth-child(an+b) a, b的數值可以由我們自訂 n代表的是由 0 開始的遞增數字

table tr:nth-child(even){ background-color: #CCFF99; } table tr:nth-child(odd){ background-color: #053D0A; } table tr:nth-child(3n){ background-color: #666666; } table tr:nth-child(3n+1){ background-color: #0066FF; } ul li:first-child {background: #FF0} ul li:last-child {background: #FF0}

h1{ color: #000000; position: absolute; -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)), to(rgba(0,0,0,0))); } <h1>CSS文字漸層</h1>    

自動換行 div{ word-wrap: break-word; word-break: normal; } 強制不換行 div{ white-space:nowrap; } 強制英文單詞斷行 div{ word-break:break-all; }  

透過css可以解決使用手機行動裝置瀏覽網頁時 圖片適當顯示的問題 img{ max-width:100%; height:auto; }

<img src="浮水印.png" style="background-image:url(圖片.jpg);background-size：contain;" /> 浮水印.png 需要是透明底的圖片 background-size 用來設定元素背景圖片的大小 contain 使背景圖在尺寸大於內容元素的情況下，得以完整呈現。

在CSS 前掛上這一段「Reset CSS」的語法，就可以輕鬆解決各大瀏覽器的差異 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, … 繼續閱讀 →