1 *:通用選擇器
* { margin:0; padding:0; }
*選擇器是選擇頁面上的全部元素,上面的代碼作用是把全部元素的margin和padding設爲0,最基本的清除瀏覽器默認樣式的方法。
*選擇器也可以應用到子選擇器中,例如下面的代碼:
#container * { border:1px solid black; }
這樣ID爲container 的所有子標籤元素都被選中了,並且設置了border。
2 #id:id選擇器
#container { width: 960px; margin: auto; }
id
選擇器是很嚴格的並且你沒辦法去複用它。使用的時候大家還是得相當小心的。需要問自己一下:我是不是必須要給這個元素來賦值個id來定位它呢?
3 .class:類選擇器
.error { color: red; }
這是個class
選擇器。它跟id
選擇器不同的是,它可以定位多個元素。當你想對多個元素進行樣式修飾的時候就可以使用class
。當你要對某個特定的元素進行修飾那就是用id
來定位它。
4 selector1 selector2:後代選擇器
li a { text-decoration: none; }
後代選擇器是比較常用的
選擇器。如果你想更加具體的去定位元素,你可以使用它。例如,假如,你不需要定位所有的a
元素,而只需要定位li
標籤下的a
標籤?這時候你就需要使用後代
選擇器了。
提示:如果你的選擇器像X Y Z A B.error
這樣,那你就錯了。時刻都提醒自己,是否真的需要對那麼多元素修飾。
5 tagName:標籤選擇器
a { color: red; } ul { margin-left: 0; }
如果你想定位頁面上所有的某標籤,不是通過id
或者是’class’,這簡單,直接使用類型選擇器。
6 selector:link selector:visited selector:hover selector:active 僞類選擇器
一般情況下selector都爲a標籤,以上四種僞類選擇器代表的意思如下:
link:連接平常的狀態。
visited:連接被訪問過之後。
hover:鼠標放到連接上的時候。
active:連接被按下的時候。
點擊a標籤鏈接時:link、hover、active
ul + p { color: red; }
ul
標籤後面的第一段,並將它們的顏色都設置爲紅色。div#container > ul { border: 1px solid black; }
它與差別就是後面這個指揮選擇它的直接子元素。看下面的例子:
<div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>
#container > ul
只會選中id
爲’container’的div
下的所有直接ul
元素。它不會定位到如第一個li
下的ul
元素。
由於某些原因,使用子節點組合選擇器會在性能上有許多的優勢。事實上,當在javascript中使用css
選擇器時候是強烈建議這麼做的。
ul ~ p { color: red; }
兄弟節點組合選擇器跟相鄰選擇器
很相似,然後它又不是那麼的嚴格。ul + p
選擇器只會選擇緊挨跟着指定元素的那些元素。而這個選擇器,會選擇跟在目標元素後面的所有匹配的元素。
a[title] { color: green; }
上面的這個例子中,只會選擇有title屬性的元素。那些沒有此屬性的錨點標籤將不會被這個代碼修飾。
11 selector[href="foo"] : 屬性選擇器
a[href="http://strongme.cn"] { color: #1f6053; /* nettuts green */ }
上面這片代碼將會把href
屬性值爲http://strongme.cn
的錨點標籤設置爲綠色,而其他標籤則不受影響。
注意:我們將值用雙引號括起來了。那麼在使用Javascript的時候也要使用雙引號括起來。可以的話,儘量使用標準的CSS3選擇器。
12 selector[href*=”strongme”] : 屬性選擇器
a[href*="strongme"] { color: #1f6053; }
指定了strongme
這個值必須出現在錨點標籤的href
屬性中,不管是strongme.cn
還是strongme.com
還是www.strongme.cn
都可以被選中。
但是記得這是個很寬泛的表達方式。如果錨點標籤指向的不是strongme
相關的站點,如果要更加具體的限制的話,那就使用^
和$
,分別表示字符串的開始和結束。
13 selector[href^=”href”] : 屬性選擇器
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }
大家肯定好奇過,有些站點的錨點標籤旁邊會有一個外鏈圖標,我也相信大家肯定見過這種情況。這樣的設計會很明確的告訴你會跳轉到別的網站。
用克拉符號就可以輕易做到。它通常使用在正則表達式中標識開頭。如果我們想定位錨點屬性href
中以http
開頭的標籤,那我們就可以用與上面相似的代碼。
注意我們沒有搜索http://,那是沒必要的,因爲它都不包含https://。
14 selector[href$=”.jpg”] : 屬性選擇器
a[href$=".jpg"] { color: red; }
這次我們又使用了正則表達式$
,表示字符串的結尾處。這段代碼的意思就是去搜索所有的圖片鏈接,或者其它鏈接是以.jpg
結尾的。但是記住這種寫法是不會對gifs
和pngs
起作用的。
15 selector[data-*=”foo”] : 屬性選擇器
a[data-filetype="image"] { color: red; }
回到上一條,我們如何把所有的圖片類型都選中呢png
,jpeg
,’jpg’,’gif’?我們可以使用多選擇器。看下面:
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red; }
但是這樣寫着很蛋疼啊,而且效率會很低。另外一個辦法就是使用自定義屬性。我們可以給每個錨點加個屬性data-filetype
指定這個鏈接指向的圖片類型。
a[data-filetype="image"] { color: red; }
16 selector[foo~=”bar”] : 屬性選擇器
a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; }
這個我想會讓你的小夥伴驚呼妙極了。很少有人知道這個技巧。這個~
符號可以定位那些某屬性值是空格分隔多值的標籤。
繼續使用第15條那個例子,我們可以設置一個data-info
屬性,它可以用來設置任何我們需要的空格分隔的值。這個例子我們將指示它們爲外部連接和圖片鏈接。
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
給這些元素設置了這個標誌之後,我們就可以使用~
來定位這些標籤了。
/* Target data-info attr that contains the value "external" */ a[data-info~="external"] { color: red; } /* And which contain the value "image" */ a[data-info~="image"] { border: 1px solid black; }
17 selector:checked : 僞類選擇器
input[type=radio]:checked { border: 1px solid black; }
上面這個僞類寫法可以定位那些被選中的單選框和多選框,就是這麼簡單。
18 selector:after : 僞類選擇器before
和after
這倆僞類。好像每天大家都能找到使用它們的創造性方法。它們會在被選中的標籤周圍生成一些內容。
當使用.clear-fix
技巧時許多屬性都是第一次被使用到裏面的。
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
上面這段代碼會在目標標籤後面補上一段空白,然後將它清除。這個方法你一定得放你的聚寶盆裏面。特別是當overflow:hidden
方法不頂用的時候,這招就特別管用了。
根據CSS3標準規定,可以使用兩個冒號::
。然後爲了兼容性,瀏覽器也會接受一個冒號的寫法。其實在這個情況下,用一個冒號還是比較明智的。
19 selector:hover : 僞類選擇器
div:hover { background: #e3e3e3; }
不用說,大家肯定知道它。官方的說法是user action pseudo class
.聽起來有點兒迷糊,其實還好。如果想在用戶鼠標飄過的地方塗點兒彩,那這個僞類寫法可以辦到。
注意:舊版本的IE只會對加在錨點a
標籤上的:hover
僞類起作用。
通常大家在鼠標飄過錨點鏈接時候加下邊框的時候用到它。
a:hover { border-bottom: 1px solid black; }
專家提示:border-bottom:1px solid black;比text-decoration:underline;要好看很多。
20 selector1:not(selector2) : 僞類選擇器
div:not(#container) { color: blue; }
取反
僞類是相當有用的,假設我們要把除id
爲container
之外的所有div
標籤都選中。那上面那麼代碼就可以做到。
或者說我想選中所有出段落標籤之外的所有標籤
:not(p) { color: green; }
21 selector::pseudoElement : 僞類選擇器
p::first-line { font-weight: bold; font-size:1.2em; }
我們可以使用::
來選中某標籤的部分內容,如第一段,或者是第一個字。但是記得必須使用在塊式標籤上才起作用。
僞標籤是由兩個冒號 :: 組成的。
定位第一個字