總結30個CSS3選擇器

sutaking 發布于2019-04-23 11:43 / 1372人閱讀

摘要：選擇器也可以應用到子選擇器中，例如下面的代碼這樣為的所有子標簽元素都被選中了，并且設置了。子選擇器它與差別就是后面這個指揮選擇它的直接子元素。可以的話，盡量使用標準的選擇器。偽類選擇器和這倆偽類。根據標準規定，可以使用兩個冒號。

1 *：通用選擇器

1	`* {??` `margin:0;??` `padding:0;? }`

*選擇器是選擇頁面上的全部元素，上面的代碼作用是把全部元素的margin和padding設為0，最基本的清除瀏覽器默認樣式的方法。 ?

*選擇器也可以應用到子選擇器中，例如下面的代碼：

1	`#container * {??` `border:1px` `solid` `black;? }`

這樣ID為container 的所有子標簽元素都被選中了，并且設置了border。

2 #id：id選擇器

1 2 3 4 #container { ???width: 960px; ???margin: auto; }

id選擇器是很嚴格的并且你沒辦法去復用它。使用的時候大家還是得相當小心的。需要問自己一下：我是不是必須要給這個元素來賦值個id來定位它呢？

3 .class：類選擇器

1 2 3 .error { ??color: red; }

這是個class選擇器。它跟id選擇器不同的是，它可以定位多個元素。當你想對多個元素進行樣式修飾的時候就可以使用class。當你要對某個特定的元素進行修飾那就是用id來定位它。

4 selector1 selector2：后代選擇器

1 2 3 li a { ??text-decoration: none; }

后代選擇器是比較常用的選擇器。如果你想更加具體的去定位元素，你可以使用它。例如，假如，你不需要定位所有的a元素，而只需要定位li標簽下的a標簽？這時候你就需要使用后代選擇器了。 ?

提示：如果你的選擇器像X Y Z A B.error這樣，那你就錯了。時刻都提醒自己，是否真的需要對那么多元素修飾。

5 tagName：標簽選擇器

1 2	`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 ?

移入a標簽鏈接時：link、hover ?

點擊a標簽鏈接時：link、hover、active ?

點擊后未移入a標簽連接時：link、visited ?

點擊后移入a標簽連接時：link、visited、hover ?

點擊后再次點擊a標簽連接時：link、visited、hover、active ?

這個就是所有組合的樣式了。 ?

如果有多個同樣的樣式，后面的樣式會覆蓋前面的樣式，所以這四個偽類的定義就有順序的要求了，而大家所說的‘lvha’也是因為這個原因。

7 selector1 + selector2 ：相鄰選擇器

1 2 3 ul + p { ???color: red; }

它只會選中指定元素的直接后繼元素。上面那個例子就是選中了所有ul標簽后面的第一段，并將它們的顏色都設置為紅色。

8 selector1 > selector2 : 子選擇器

1 2 3 div#container > ul { ??border: 1px solid black; }

它與差別就是后面這個指揮選擇它的直接子元素。看下面的例子

1 2 3 4 5 6 7 8 9 10 11 12 <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選擇器時候是強烈建議這么做的。

9 selector1 ~ selector2 : 兄弟選擇器

1 2 3 ul ~ p { ??color: red; }

兄弟節點組合選擇器跟相鄰選擇器很相似，然后它又不是那么的嚴格。ul + p選擇器只會選擇緊挨跟著指定元素的那些元素。而這個選擇器，會選擇跟在目標元素后面的所有匹配的元素。

10 selector[title] : 屬性選擇器

1 2 3 a[title] { ??color: green; }

上面的這個例子中，只會選擇有title屬性的元素。那些沒有此屬性的錨點標簽將不會被這個代碼修飾。

11 selector[href="foo"] : 屬性選擇器

1 2 3 a[href="http://strongme.cn"] { ??color: #1f6053; /* nettuts green */ }

上面這片代碼將會把href屬性值為http://strongme.cn的錨點標簽設置為綠色，而其他標簽則不受影響。 ?

注意：我們將值用雙引號括起來了。那么在使用Javascript的時候也要使用雙引號括起來。可以的話，盡量使用標準的CSS3選擇器。

12 selector[href*=”strongme”]?? : 屬性選擇器

1 2 3 a[href*="strongme"] { ??color: #1f6053; }

指定了strongme這個值必須出現在錨點標簽的href屬性中，不管是strongme.cn還是strongme.com還是www.strongme.cn都可以被選中。 ?

但是記得這是個很寬泛的表達方式。如果錨點標簽指向的不是strongme相關的站點，如果要更加具體的限制的話，那就使用^和$，分別表示字符串的開始和結束。

13 selector[href^=”href”]? : 屬性選擇器

1 2 3 4 a[href^="http"] { ???background: url(path/to/external/icon.png) no-repeat; ???padding-left: 10px; }

大家肯定好奇過，有些站點的錨點標簽旁邊會有一個外鏈圖標，我也相信大家肯定見過這種情況。這樣的設計會很明確的告訴你會跳轉到別的網站。 ?

用克拉符號就可以輕易做到。它通常使用在正則表達式中標識開頭。如果我們想定位錨點屬性href中以http開頭的標簽，那我們就可以用與上面相似的代碼。 ?

注意我們沒有搜索http://，那是沒必要的，因為它都不包含https://。

14 selector[href$=”.jpg”]? : 屬性選擇器

1 2 3 a[href$=".jpg"] { ??color: red; }

這次我們又使用了正則表達式$，表示字符串的結尾處。這段代碼的意思就是去搜索所有的圖片鏈接，或者其它鏈接是以.jpg結尾的。但是記住這種寫法是不會對gifs和pngs起作用的。

15 selector[data-*=”foo”] : 屬性選擇器

1 2 3 a[data-filetype="image"] { ???color: red; }

回到上一條，我們如何把所有的圖片類型都選中呢png,jpeg,’jpg’,’gif’？我們可以使用多選擇器。看下面：

1 2 3 4 5 6 a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { ???color: red; }

但是這樣寫著很蛋疼啊，而且效率會很低。另外一個辦法就是使用自定義屬性。我們可以給每個錨點加個屬性data-filetype指定這個鏈接指向的圖片類型。

1 2 3 a[data-filetype="image"] { ???color: red; }

16 selector[foo~=”bar”] : 屬性選擇器

1 2 3 4 5 6 7 a[data-info~="external"] { ???color: red; } ?? a[data-info~="image"] { ???border: 1px solid black; }

這個我想會讓你的小伙伴驚呼妙極了。很少有人知道這個技巧。這個~符號可以定位那些某屬性值是空格分隔多值的標簽。 ?

繼續使用第15條那個例子，我們可以設置一個data-info屬性，它可以用來設置任何我們需要的空格分隔的值。這個例子我們將指示它們為外部連接和圖片鏈接。

1	`<a` `href="path/to/image.jpg"` `data-info="external image"> Click Me, Fool a>`

給這些元素設置了這個標志之后，我們就可以使用~來定位這些標簽了。

1 2 3 4 5 6 7 8 9 /* 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 ：偽類選擇器

1 2 3 input[type=radio]:checked { ???border: 1px solid black; }

上面這個偽類寫法可以定位那些被選中的單選框和多選框，就是這么簡單。

18 selector:after ：偽類選擇器??

before和after這倆偽類。好像每天大家都能找到使用它們的創造性方法。它們會在被選中的標簽周圍生成一些內容。 ?

當使用.clear-fix技巧時許多屬性都是第一次被使用到里面的。

1 2 3 4 5 6 7 8 9 10 11 12 13 .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? ：偽類選擇器

1 2 3 div:hover { ??background: #e3e3e3; }

不用說，大家肯定知道它。官方的說法是user action pseudo class.聽起來有點兒迷糊，其實還好。如果想在用戶鼠標飄過的地方涂點兒彩，那這個偽類寫法可以辦到。 ?

注意：舊版本的IE只會對加在錨點a標簽上的:hover偽類起作用。 ?

通常大家在鼠標飄過錨點鏈接時候加下邊框的時候用到它。

1 2 3 a:hover { ?border-bottom: 1px solid black; }

專家提示：border-bottom:1px solid black;比text-decoration:underline;要好看很多。

20 selector1:not(selector2) ：偽類選擇器

1 2 3 div:not(#container) { ???color: blue; }

取反偽類是相當有用的，假設我們要把除id為container之外的所有div標簽都選中。那上面那么代碼就可以做到。 ?

或者說我想選中所有出段落標簽之外的所有標簽

1 2 3 :not(p) { ??color: green; }

21 selector::pseudoElement ：偽類選擇器

1 2 3 4 p::first-line { ??font-weight: bold; ??font-size:1.2em; }

我們可以使用::來選中某標簽的部分內容css3 radius，如第一段，或者是第一個字。但是記得必須使用在塊式標簽上才起作用。 ?

偽標簽是由兩個冒號 :: 組成的 ?

定位第一個字：

1 2 3 4 5 6 7 p::first-letter { ???float: left; ???font-size: 2em; ???font-weight: bold; ???font-family: cursive; ???padding-right: 2px; }

上面這段代碼會找到頁面上所有段落，并且指定為每一段的第一個字。

它通常在一些新聞報刊內容的重點突出會使用到。

定位某段的第一行

1 2 3 4 p::first-line { ???font-weight: bold; ???font-size: 1.2em; }

跟::first-line相似，會選中段落的第一行 ?

為了兼容性，之前舊版瀏覽器也會兼容單冒號的寫法，例如:first-line,:first-letter,:before,:after.但是這個兼容對新介紹的特性不起作用。

22 selector:nth-child(n) ：偽類選擇器

1 2 3 li:nth-child(3) { ???color: red; }

還記得我們面對如何取到堆疊式標簽的第幾個元素時無處下手的時光么，有了nth-child那日子就一去不復返了。 ?

請注意nth-child接受一個整形參數，然后它不是從0開始的。如果你想獲取第二個元素那么你傳的值就是li:nth-child(2). ?

我們甚至可以獲取到由變量名定義的個數個子標簽。例如我們可以用li:nth-child(4n)去每隔3個元素獲取一次標簽。

23 selector:nth-last-child(n) ：偽類選擇器

1 2 3 li:nth-last-child(2) { ???color: red; }

假設你在一個ul標簽中有N多的元素，而你只想獲取最后三個元素，甚至是這樣li:nth-child(397)，你可以用nth-last-child偽類去代替它。

24 selectorX:nth-of-type(n) ：偽類選擇器

1 2 3 ul:nth-of-type(3) { ???border: 1px solid black; }

曾幾何時，我們不想去選擇子節點，而是想根據元素的類型來進行選擇。 ?

想象一下有5個ul標簽。如果你只想對其中的第三個進行修飾，而且你也不想使用id屬性，那你就可以使用nth-of-type(n)偽類來實現了，上面的那個代碼，只有第三個ul標簽會被設置邊框。

25 selector:nth-last-of-type(n) ：偽類選擇器??

1 2 3 ul:nth-last-of-type(3) { ???border: 1px solid black; }

同樣，也可以類似的使用nth-last-of-type來倒序的獲取標簽。

26 selector:first-child ：偽類選擇器

1 2 3 ul li:first-child { ???border-top: none; }

這個結構性的偽類可以選擇到第一個子標簽css3 3D，你會經常使用它來取出第一個和最后一個的邊框。 ?

假設有個列表，每個標簽都有上下邊框，那么效果就是第一個和最后一個就會看起來有點奇怪。這時候就可以使用這個偽類來處理這種情況了。

27 selector:last-child ：偽類選擇器

1 2 3 ul > li:last-child { ???color: green; }

跟first-child相反，last-child取的是父標簽的最后一個標簽。 ?

例如 ?

標簽

1 2 3 4 5 <ul> ???<li> List Item li> ???<li> List Item li> ???<li> List Item li> ul>

這里沒啥內容，就是一個了 List。

1 2 3 4 5 6 7 8 9 10 11 12 13 ul { ?width: 200px; ?background: #292929; ?color: white; ?list-style: none; ?padding-left: 0; } ?? li { ?padding: 10px; ?border-bottom: 1px solid black; ?border-top: 1px solid #3c3c3c; }

上面的代碼將設置背景色，移除瀏覽器默認的內邊距，為每個li設置邊框以凸顯一定的深度。

28 selector:only-child ：偽類選擇器

1 2 3 div p:only-child { ???color: red; }

說實話，你會發現你幾乎都不會用到這個偽類。然而，它是相當有用的，說不準哪天你就會用到它。 ?

它允許你獲取到那些只有一個子標簽的父標簽下的那個子標簽。就像上面那段代碼，只有一個段落標簽的div才被著色。

1 2 3 4 5 <div><p> My paragraph here. p>div> <div> ???<p> Two paragraphs total. p> ???<p> Two paragraphs total. p> div>

上面例子中，第二個div不會被選中。一旦第一個div有了多個子段落css3 transition，那這個就不再起作用了。

29 selector:only-of-type：偽類選擇器

1 2 3 li:only-of-type { ???font-weight: bold; }

結構性偽類可以用的很聰明。它會定位某標簽下相同子標簽的只有一個的目標。設想你想獲取到只有一個子標簽的ul標簽下的li標簽呢？ ?

使用ul li會選中所有li標簽。這時候就要使用only-of-typecss3圓角了。

1 2	`ul > li:only-of-type {` `???font-weight:` `bold;`

GPU云服務器云服務器選擇器總結 30個電腦用多大的阿里云服務器選擇器派生選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1068.html

CSS3中的選擇器

通配符選擇器類選擇器 id選擇器元素選擇器屬性選擇器后代選擇器子元素選擇器兄弟選擇器偽元素選擇器偽類選擇器群組選擇器這里總結一共有11種選擇器，分別為：通配符選擇器、類選擇器、id選擇器、元素選擇器（又叫標簽選擇器）、屬性選擇器、偽類選擇器、偽元素選擇器、后代選擇器（又叫包含選擇器）、子元素選擇器、兄弟選擇器（相鄰兄弟選擇器+、通用兄弟選擇器~）、群組選擇器（幾個共用一...

番茄西紅柿 2019-04-23 13:45 評論0 收藏0
CSS效果篇--純CSS+HTML實現checkbox的思路與實例

摘要：出于美化和統一視覺效果的需求，的自定義就被提出來了。這里對實現方法做個總結。實現思路純實現的主要手段是利用標簽的模擬功能。個人建議用的和偽元素和是一個東西。向擁有鍵盤輸入焦點的元素添加樣式。向已被訪問的鏈接添加樣式。 checkbox應該是一個比較常用的html功能了，不過瀏覽器自帶的checkbox往往樣式不怎么好看，而且不同瀏覽器效果也不一樣。出于美化和統一視覺效果的需求，chec...

qingshanli1988 2019-08-01 18:22 評論0 收藏0
CSS效果篇--純CSS+HTML實現checkbox的思路與實例

摘要：出于美化和統一視覺效果的需求，的自定義就被提出來了。這里對實現方法做個總結。實現思路純實現的主要手段是利用標簽的模擬功能。個人建議用的和偽元素和是一個東西。向擁有鍵盤輸入焦點的元素添加樣式。向已被訪問的鏈接添加樣式。 checkbox應該是一個比較常用的html功能了，不過瀏覽器自帶的checkbox往往樣式不怎么好看，而且不同瀏覽器效果也不一樣。出于美化和統一視覺效果的需求，chec...

miqt 2019-08-29 14:12 評論0 收藏0
css3 動畫總結

摘要：如果你做其他的動畫，或者動畫之類的，一定知道幀這個東西。這個是動畫的一個過程，電腦是根據幀，然后渲染得到的一個連續的動畫。規定完成動畫所花費的時間，以秒或毫秒計。就是播放一次停在最后一幀播放次數和播放完成之后保留的最后的轉態。　　原來的時候寫過一個小程序，里面有一個播放背景音樂的按鈕（也是一個圓形的圖片），它是一直在旋轉的，當我們點擊這個按鈕的可以暫停或者播放背景音樂。當初的這個動畫，是同事...

XiNGRZ 2019-04-23 13:19 評論0 收藏0
Python開發【前端篇】HTML5+CSS3

摘要：權重權重權重指的是樣式的優先級，有兩條或多條樣式作用于一個元素，權重高的那條樣式對元素起作用權重相同的，后寫的樣式會覆蓋前面寫的樣式。標簽支持格式屬性可選第三方播放器CSS權重 CSS權重指的是樣式的優先級，有兩條或多條樣式作用于一個元素，權重高的那條樣式對元素起作用,權重相同的，后寫的樣式會覆蓋前面寫的樣式。權重的等級可以把樣式的應用方式分為幾個等級，按照等級來計算權重 1、!impo...

番茄西紅柿 2019-04-23 13:27 評論0 收藏0