前段開發必記住 30 類 CSS 選擇器

時間  2019-11-08
標籤 前段 開發 記住 css 選擇器 欄目 CSS 简体版
原文   原文鏈接

1. *

CSSjavascript

1css

2html

3java

4css3

; html-script: false ]* {es6

  margin: 0;正則表達式

  padding: 0;瀏覽器

}工具

在咱們看比較高級的選擇器以前，應該認識下這個衆所周知的清空選擇器。星號呢會將頁面上全部每個元素都選到。許多開發者都用它來清空margin和padding。固然你在練習的時候使用這個沒問題，可是我不建議在生產環境中使用它。它會給瀏覽器憑添許多沒必要要的東西。
*也能夠用來選擇某元素的全部子元素。性能

CSS

1

2

3

; html-script: false ]#container * {

  border: 1px solid black;

}

它會選中#container下的全部元素。固然，我仍是不建議你去使用它。

DEMO
兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

CSS

1

2

3

4

; html-script: false ]#container {

   width: 960px;

   margin: auto;

}

 

在選擇器中使用#能夠用id來定位某個元素。你們一般都會這麼使用，使用的時候你們仍是得至關當心的。
須要問本身一下：我是否是必需要給這個元素來賦值個id來定位它呢？

id選擇器是很嚴格的而且你沒辦法去複用它。若是能夠的話，首先試試用標籤名字，HTML5中的新元素，或者是僞類。
DEMO
兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

CSS

1

2

3

; html-script: false ].error {

  color: red;

}

 

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

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4. X Y

CSS

1

2

3

; html-script: false ]li a {

  text-decoration: none;

}

 

下一個經常使用的就是descendant選擇器。若是你想更加具體的去定位元素，你可使用它。例如，假如，你不須要定位全部的a元素，而只須要定位li標籤下的a標籤？這時候你就須要使用descendant選擇器了。

專家提示：若是你的選擇器像X Y Z A B.error這樣，那你就錯了。時刻都提醒本身，是否真的須要對那麼多元素修飾。
DEMO
兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

CSS

1

2

; html-script: false ]a { color: red; }

ul { margin-left: 0; }

 

若是你想定位頁面上全部的某標籤，不是經過id或者是’class’，這簡單，直接使用類型選擇器。
DEMO
兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6. X:visited 和 X:link

CSS

1

2

; html-script: false ]a:link {color:red;}

a:visited {color: purple;}

咱們使用:link這個僞類來定位全部尚未被訪問過的連接。
另外，咱們也使用:visited來定位全部已經被訪問過的連接。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X+Y

CSS

1

2

3

; html-script: false ]ul + p {

   color: red;

}

 

這個叫相鄰選擇器。它指揮選中指定元素的直接後繼元素。上面那個例子就是選中了全部ul標籤後面的第一段，並將它們的顏色都設置爲紅色。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8. X>Y

CSS

1

2

3

; html-script: false ]div#container > ul {

  border: 1px solid black;

}

 

X Y和X > Y的差異就是後面這個指揮選擇它的直接子元素。看下面的例子：

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

; html-script: false ]<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 &gt; ul只會選中id爲’container’的div下的全部直接ul元素。它不會定位到如第一個li下的ul元素。
因爲某些緣由，使用子節點組合選擇器會在性能上有許多的優點。事實上，當在javascript中使用css選擇器時候是強烈建議這麼作的。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

CSS

1

2

3

; html-script: false ]ul ~ p {

  color: red;

}

 

兄弟節點組合選擇器跟X+Y很類似，而後它又不是那麼的嚴格。ul + p選擇器只會選擇緊挨跟着指定元素的那些元素。而這個選擇器，會選擇跟在目標元素後面的全部匹配的元素。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[title]

CSS

1

2

3

; html-script: false ]a[title] {

  color: green;

}

 

這個叫屬性選擇器，上面的這個例子中，只會選擇有title屬性的元素。那些沒有此屬性的錨點標籤將不會被這個代碼修飾。那再想一想若是你想更加具體的去篩選？那…
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href=」foo」]

CSS

1

2

3

; html-script: false ]a[href="http://strongme.cn"] {

  color: #1f6053; /* nettuts green */

}

 

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

注意咱們將值用雙引號括起來了。那麼在使用Javascript的時候也要使用雙引號括起來。能夠的話，儘可能使用標準的CSS3選擇器。

這樣能夠用了，可是仍是有點死，若是不是這個連接，而是相似的連接，那麼這時就得用正則表達式了。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*=」strongme」]

CSS

1

2

3

; html-script: false ]a[href*="strongme"] {

  color: #1f6053;

}

 

Tada,正是咱們須要的，這樣，就指定了strongme這個值必須出如今錨點標籤的href屬性中，不論是strongme.cn仍是strongme.com仍是www.strongme.cn均可以被選中。
可是記得這是個很寬泛的表達方式。若是錨點標籤指向的不是strongme相關的站點，若是要更加具體的限制的話，那就使用^和$，分別表示字符串的開始和結束。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^=」href」]

CSS

1

2

3

4

; html-script: false ]a[href^="http"] {

   background: url(path/to/external/icon.png) no-repeat;

   padding-left: 10px;

}

 

你們確定好奇過，有些站點的錨點標籤旁邊會有一個外鏈圖標，我也相信你們確定見過這種狀況。這樣的設計會很明確的告訴你會跳轉到別的網站。
用克拉符號就能夠輕易作到。它一般使用在正則表達式中標識開頭。若是咱們想定位錨點屬性href中以http開頭的標籤，那咱們就能夠用與上面類似的代碼。

注意咱們沒有搜索http://，那是不必的，由於它都不包含https://。

那若是咱們想找到全部指向一張圖片的錨點標籤呢？那咱們來使用下&amp;字符。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

14. X[href$=」.jpg」]

CSS

1

2

3

; html-script: false ]a[href$=".jpg"] {

  color: red;

}

 

此次咱們又使用了正則表達式$，表示字符串的結尾處。這段代碼的意思就是去搜索全部的圖片連接，或者其它連接是以.jpg結尾的。可是記住這種寫法是不會對gifs和pngs起做用的。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

15. X[data-*=」foo」]

CSS

1

2

3

; html-script: false ]a[data-filetype="image"] {

   color: red;

}

 

在回到第8條，咱們如何把全部的圖片類型都選中呢png,jpeg,’jpg’,’gif’？咱們可使用多選擇器。看下面：

CSS

1

2

3

4

5

6

; html-script: false ]a[href$=".jpg"],

a[href$=".jpeg"],

a[href$=".png"],

a[href$=".gif"] {

   color: red;

}

 

可是這樣寫着很蛋疼啊，並且效率會很低。另一個辦法就是使用自定義屬性。咱們能夠給每一個錨點加個屬性data-filetype指定這個連接指向的圖片類型。
[html]
Image Link </a[/html]
那有了這個鉤子，咱們就能夠去用標準的辦法只去選定文件類型爲image的錨點了。

CSS

1

2

3

; html-script: false ]a[data-filetype="image"] {

   color: red;

}

 

DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16. X[foo~=」bar」]

CSS

1

2

3

4

5

6

7

; html-script: false ]a[data-info~="external"] {

   color: red;

}

 

a[data-info~="image"] {

   border: 1px solid black;

}

 

這個我想會讓你的小夥伴驚呼妙極了。不多有人知道這個技巧。這個~符號能夠定位那些某屬性值是空格分隔多值的標籤。
繼續使用第15條那個例子，咱們能夠設置一個data-info屬性，它能夠用來設置任何咱們須要的空格分隔的值。這個例子咱們將指示它們爲外部鏈接和圖片連接。

 

XHTML

 

1

; html-script: false ]<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

 

給這些元素設置了這個標誌以後，咱們就可使用~來定位這些標籤了。

CSS

1

2

3

4

5

6

7

8

9

; html-script: false ]/* 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. X:checked

CSS

1

2

3

; html-script: false ]input[type=radio]:checked {

   border: 1px solid black;

}

 

上面這個僞類寫法能夠定位那些被選中的單選框和多選框，就是這麼簡單。
DEMO
兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18. X:after

before和after這倆僞類。好像天天你們都能找到使用它們的創造性方法。它們會在被選中的標籤周圍生成一些內容。
當使用.clear-fix技巧時許多屬性都是第一次被使用到裏面的。

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

; html-script: false ].clearfix:after {

    content: "";

    display: block;

    clear: both;

    visibility: hidden;

    font-size: 0;

    height: 0;

  }

 

.clearfix {

   *display: inline-block;

   _height: 1%;

}

 

上面這段代碼會在目標標籤後面補上一段空白，而後將它清除。這個方法你必定得放你的聚寶盆裏面。特別是當overflow:hidden方法不頂用的時候，這招就特別管用了。
還想看其餘創造性的使用這個僞類，看這裏。

根據CSS3標準規定，可使用兩個冒號::。而後爲了兼容性，瀏覽器也會接受一個冒號的寫法。其實在這個狀況下，用一個冒號仍是比較明智的。

兼容性

  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera

19. X::hover

CSS

1

2

3

; html-script: false ]div:hover {

  background: #e3e3e3;

}

 

不用說，你們確定知道它。官方的說法是user action pseudo class.聽起來有點兒迷糊，其實還好。若是想在用戶鼠標飄過的地方塗點兒彩，那這個僞類寫法能夠辦到。

注意舊版本的IE只會對加在錨點a標籤上的:hover僞類起做用。

一般你們在鼠標飄過錨點連接時候加下邊框的時候用到它。

CSS

1

2

3

; html-script: false ]a:hover {

border-bottom: 1px solid black;

}

 

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

兼容性

  • IE6+(IE6只能在錨點標籤上起做用)
  • Firefox
  • Chrome
  • Safari
  • Opera

20. X:not(selector)

CSS

1

2

3

; html-script: false ]div:not(#container) {

   color: blue;

}

 

取反僞類是至關有用的，假設咱們要把除id爲container以外的全部div標籤都選中。那上面那麼代碼就能夠作到。

或者說我想選中全部出段落標籤以外的全部標籤。

CSS

1

2

3

; html-script: false ]*:not(p) {

  color: green;

}

 

DEMO
兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

21. X::pseudoElement

CSS

1

2

3

4

; html-script: false ]p::first-line {

  font-weight: bold;

  font-size:1.2em;

}

 

咱們可使用::來選中某標籤的部份內容，如第一段，或者是第一個字。可是記得必須使用在塊式標籤上才起做用。

僞標籤是由兩個冒號 :: 組成的。

定位第一個字

CSS

1

2

3

4

5

6

7

; html-script: false ]p::first-letter {

   float: left;

   font-size: 2em;

   font-weight: bold;

   font-family: cursive;

   padding-right: 2px;

}

 

上面這段代碼會找到頁面上全部段落，而且指定爲每一段的第一個字。

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

定位某段的第一行

CSS

1

2

3

4

; html-script: false ]p::first-line {

   font-weight: bold;

   font-size: 1.2em;

}

 

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

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

DEMO
兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

22. X:nth-child(n)

CSS

1

2

3

; html-script: false ]li:nth-child(3) {

   color: red;

}

 

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

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

咱們甚至能夠獲取到由變量名定義的個數個子標籤。例如咱們能夠用li:nth-child(4n)去每隔3個元素獲取一次標籤。
DEMO
兼容性

  • IE9+
  • Firefox3.5+
  • Chrome
  • Safari

23. X:nth-last-child(n)

CSS

1

2

3

; html-script: false ]li:nth-last-child(2) {

   color: red;

}

 

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

這個技巧能夠很正確的代替第16個TIP，不一樣的就是它是從結尾處開始的，倒回去的。
DEMO
兼容性

  • IE9+
  • Firefox3.5+
  • Chrome
  • Safari
  • Opera

24. X:nth-of-type(n)

CSS

1

2

3

; html-script: false ]ul:nth-of-type(3) {

   border: 1px solid black;

}

 

曾幾什麼時候，咱們不想去選擇子節點，而是想根據元素的類型來進行選擇。

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

  • IE9+
  • Firefox3.5+
  • Chrome
  • Safari

25. X:nth-last-of-type(n)

CSS

1

2

3

; html-script: false ]ul:nth-last-of-type(3) {

   border: 1px solid black;

}

 

一樣，也能夠相似的使用nth-last-of-type來倒序的獲取標籤。

兼容性

  • IE9+
  • Firefox3.5+
  • Chrome
  • Safari
  • Opera

26. X:first-child

CSS

1

2

3

; html-script: false ]ul li:first-child {

   border-top: none;

}

 

這個結構性的僞類能夠選擇到第一個子標籤，你會常用它來取出第一個和最後一個的邊框。

假設有個列表，每一個標籤都有上下邊框，那麼效果就是第一個和最後一個就會看起來有點奇怪。這時候就可使用這個僞類來處理這種狀況了。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27. X:last-child

CSS

1

2

3

; html-script: false ]ul > li:last-child {

   color: green;

}

 

跟first-child相反，last-child取的是父標籤的最後一個標籤。

例如
標籤

XHTML

1

2

3

4

5

<ul>

   <li> List Item </li>

   <li> List Item </li>

   <li> List Item </li>

</ul>

 

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

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

; html-script: false ]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設置邊框以凸顯必定的深度。

DEMO

兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

28. X:only-child

CSS

1

2

3

; html-script: false ]div p:only-child {

   color: red;

}

 

說實話，你會發現你幾乎都不會用到這個僞類。然而，它是至關有用的，說不許哪天你就會用到它。

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

XHTML

1

2

3

4

5

6

; html-script: false ]<div><p> My paragraph here. </p></div>

 

<div>

   <p> Two paragraphs total. </p>

   <p> Two paragraphs total. </p>

</div>

 

上面例子中，第二個div不會被選中。一旦第一個div有了多個子段落，那這個就再也不起做用了。
DEMO
兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

29. X:only-of-type

CSS

1

2

3

; html-script: false ]li:only-of-type {

   font-weight: bold;

}

 

結構性僞類能夠用的很聰明。它會定位某標籤只有一個子標籤的目標。設想你想獲取到只有一個子標籤的ul標籤？

使用ul li會選中全部li標籤。這時候就要使用only-of-type了。

CSS

1

2

3

; html-script: false ]ul > li:only-of-type {

   font-weight: bold;

}

 

DEMO
兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera
  1. X:first-of-type first-of-type僞類能夠選擇指定標籤的第一個兄弟標籤。

測試

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

; html-script: false ]<div>

   <p> My paragraph here. </p>

   <ul>

      <li> List Item 1 </li>

      <li> List Item 2 </li>

   </ul>

 

   <ul>

      <li> List Item 3 </li>

      <li> List Item 4 </li>

   </ul>  

</div>

 

來你把List Item 2取出來，若是你已經取出來或者是放棄了，來繼續。

解決辦法1
辦法不少，咱們看一些比較方便的。首先是first-of-type。

CSS

1

2

3

; html-script: false ]ul:first-of-type > li:nth-child(2) {

   font-weight: bold;

}

 

找到第一個ul標籤，而後找到直接子標籤li，而後找到第二個子節點。
解決辦法2
另外一個解決辦法就是鄰近選擇器。

CSS

1

2

3

; html-script: false ]p + ul li:last-child {

   font-weight: bold;

}

 

這種狀況下，找到p下的直接ul標籤，而後找到它的最後一個直接子標籤。

解決辦法3
咱們能夠隨便玩耍這些選擇器。來看看：

CSS

1

2

3

; html-script: false ]ul:first-of-type li:nth-last-child(1) {

   font-weight: bold;  

}

 

先獲取到頁面上第一個ul標籤，而後找到最後一個子標籤。
DEMO
兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

結論

若是你想向舊版本瀏覽器妥協，好比IE6，那你用這些新的選擇器的時候仍是得當心點。但別讓IE6阻止你去學這些新的技能。那你就對本身太殘忍了。記得多查查兼容性列表，或者使用Dean Edward’s excellent IE9.js script 來讓你的瀏覽器具備這些特性。

第二個，使用像jQuery等工具的時候，儘可能使用原生的CSS3選擇器。可能會讓你的代碼跑的很快。這樣選擇器引擎就可使用瀏覽器原生解析器，而不是選擇器本身的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程