前端頁面設計常見的30個CSS選擇器

本文轉載自查看原文 2017-03-05 21:09 2593 css

1. * --> 通配符選擇器

* {
 margin: 0;
 padding: 0;
}

星號符會選擇頁面每個元素。很多開發者用它把所有margin和padding歸零。這當然是快捷測試方法。不過我建議你不使用它，它給瀏覽器帶來太多的負擔，這不必要。
通配選擇器也可以用到子選擇器上。

/* 選中容器中所有子元素*/

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

兼容性

IE6+
Firefox
Chrome
Safari
Opera

2. #X --> ID選擇器

#container {
   width: 960px;
   margin: auto;
}

不過id選擇器具有唯一性的而且渲染速度是最快的

兼容性

IE6+
Firefox
Chrome
Safari
Opera

3. .X --> 類別選擇器

.error {
  color: red;
}

這是類選擇器。ID選擇器與類選擇器的差別是，后者可以用於多個元素。使用類選擇器可以把同樣的樣式賦予一群元素，相反，id選擇器只能作用於特定的單一元素。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

4. X Y --> 子元素選擇器

li a {
  text-decoration: none;
}

后代選擇器是使用很多的選擇器。它作用處於X元素內的所有的y元素。不過如果你的選擇器像X Y Z A B.error，那你的方法就錯了。這開銷太大了

兼容性

IE6+
Firefox
Chrome
Safari
Opera

5. X --> 標簽選擇器

a { color: red; }
ul { margin-left: 0; }

類型選擇器會選擇頁面中同一類型的標簽。比如說ul{…}會選擇頁面中所有的ul。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

6. X:visited And X:link --> 偽類選擇器

a:link { color: red; }
a:visted { color: purple; }

:link作用於沒有訪問過的鏈接，:visited作用於訪問過的鏈接。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

7. X + Y --> 兄弟選擇器

ul + p {
   color: red;
}

相信選擇器只作用於同一父級元素下的第一個元素。例子中的只有緊鄰ul中的第一個p的字體會是紅色的。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

8. X > Y --> 元素過濾選擇器

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

X Y和X>Y不同的地方后者只選擇X的第一級子元素。例如下面

   <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只選擇直接位於#container層下的ul,不會作用於li中的ul。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

9. X ~ Y --> 兄弟選擇器(所有)

ul ~ p {
   color: red;
}

這個相鄰選擇器與X+Y相似，不同的是，ul+p只選擇與ul相鄰的第一個p,而x~Y選擇所有與ul相鄰的P。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

10. X[Title] --> 標簽[屬性]選擇器

a[title] {
   color: green;
}

一種屬性選擇器。上例中，只選擇帶有title屬性的鏈接標簽。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

11. X[Href="Foo"] --> 標簽[屬性=過濾值]選擇器

a[href="http://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

兼容性

IE7+
Firefox
Chrome
Safari
Opera

12. X[Href*="Nettuts"] --> 標簽[屬性通配符 = 屬性值]選擇器

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

兼容性

IE7+
Firefox
Chrome
Safari
Opera

13. X[Href^="Http"]

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

有些網站用這個方法在某些鏈接上加一些圖標說明這些鏈接到其他網站。它經常用於表達式中顯示字符串的開始。如果我們想選擇那樣帶有http的a標簽鏈接，我們可以使用類似上面的CSS。(這不是搜索http://,這不必要，對https://沒起作用)。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

14. X[Href$=".Jpg"]

a[href$=".jpg"] {
   color: red;
}

又一次，我們使用了一個表達式的符號，$,查找字符串的尾部。這個例子中，我們查找所有鏈接到圖片的鏈接，或許說以.jpg結尾的鏈接。這當然不對gif和png格式的起作用。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

15. X[Data-*="Foo"]

a[data-filetype="image"] {
   color: red;
}

回到第8個（？感覺第8個和這個有點風馬牛不相及）；我們怎么補償不同圖片格式：png,jpeg,jpg,gif? 我們可以使用多重選擇器，比如：

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

回到第8個（？感覺第8個和這個有點風馬牛不相及）；我們怎么補償不同圖片格式：png,jpeg,jpg,gif? 我們可以使用多重選擇器，比如：

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

在適當的地方加上鈎后，我們就可以使用一個標准的屬性選擇器選擇這些標簽。

a[data-filetype="image"] {
   color: red;
}

兼容性

IE7+
Firefox
Chrome
Safari
Opera

16. X[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;
}

兼容性

IE7+
Firefox
Chrome
Safari
Opera

17. X:checked

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

這個偽類選擇器只會作用於被選中的用戶界面元素(user interface element)，比如說單選按鈕，或者復選框。

兼容性

IE9+
Firefox
Chrome
Safari
Opera

18. X:after

這個偽類和:before一樣，主要是用來清除浮動的。不過現在人們都能在它們身上找到新的用法。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix {
   *display: inline-block;
   _height: 1%;
}

兼容性

IE8+
Firefox
Chrome
Safari
Opera

19. X:hover

div:hover {
  background: #e3e3e3;
}

這是一個動態偽類。當元素有鼠標移在其上面時樣式就會起作用。一般用於鏈接。比如a:hover{border-bottom:1px solid black;}(border-bottom:1px solid black;效果比text-decoration:underline;好)。

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

兼容性

IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera

此處為css3選擇器

20. X:not(Selector)

div:not(#container) {
   color: blue;
}

這個否定偽類非常有用。比如要選擇除#container層外的所有層。上面的代碼就非常有效。
又比如我要選擇除了段落標簽外的所有元素(不建議這樣做)，可以這樣做：

*:not(p) {
  color: green;
}

兼容性

IE9+
Firefox
Chrome
Safari
Opera

21. X::PseudoElement

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

使用這類偽類(用::指定)可以設計一個元素的一片斷，比如說第一行，或者第一個字。需要記住的事，這偽類只能作用於塊元素。

選擇段落的第一個字符

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

這代碼片斷先提取頁面中的所有段落，然后再查找段落中的第一個字。
這方法經常用於制作報紙風格的頁面。

選擇段落的第一行

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

兼容性

IE6+
Firefox
Chrome
Safari
Opera

22. X:nth-Child(N)

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

過去我們無法從一堆元素中選擇具體的幾個。nth-child偽類可以解決這種問題。
nth-child接受整數參數，不過它不是基於零開始，如果你要選擇列表中的第二個，就使用li:nth-child(2)。
我們還可以使用這個偽類選擇幾個子類。比如，用li:nth-child(4n)來選擇4倍數的列表。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari

23. X:nth-Last-Child(N)

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

如果列表項非常多，但只是需要選擇倒數第三個。使用li:nth-child(397)不如使用nth-last-child方便。
和上面的用法不一樣，nth-last-child是從后面倒着數。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

24. X:nth-Of-Type(N)

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

選擇子類也許不如根據類型選擇元素更方便。比如說現在有5個無序列表，但只需選擇第三個，這時可以使用ul:nth-of-type(3)。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari

25. X:nth-Last-Of-Type(N)

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

對了，我們也可以使用nth-last-of-type選擇倒數第幾個元素。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

26. X:first-Child

ul li:first-child {
   border-top: none;
}

這個結構性偽類選擇父級元素的第一個子對象。這個經常用於移除列表的第一個和最后一個元素的邊框。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

27. X:last-Child

ul > li:last-child {
   color: green;
}

這個偽類選擇父級元素的最后一個對象。

例子

用一個簡單的例子來說明這樣選擇器，首先，我們制作一個列表。

標簽

  <ul>
     <li> List Item </li>
     <li> List Item </li>
     <li> List Item </li>
  </ul>

很簡單的列表

CSS

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;
}

設置好背景，去掉ul默認的內邊距，再給每個li加上邊。

就像圖片中顯示的一樣，我們需要去掉第一個和最后一個的邊。這時就可以使用:first-child和:last-child。

li:first-child {
    border-top: none;
}

li:last-child {
   border-bottom: none;
}

兼容性

IE9+
Firefox
Chrome
Safari
Opera

Yep – IE8 supported :first-child, but not :last-child. Go figure.

28. X:only-Child

div p:only-child {
   color: red;
}

確實，這個你可能很少用。不過這個真的很有用。
在下面的例子，只有第一層中的p標簽會變色。父級元素下的子類多於一個時這個偽類效果就停止了。

<div><p> My paragraph here. </p></div>
<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
</div>

兼容性

IE9+
Firefox
Chrome
Safari
Opera

29. X:only-Of-Type

li:only-of-type {
   font-weight: bold;
}

和28個結構性偽類相似，這個偽類只會在父級元素下只有一個子級元素X的情況下起作用。這種情況，你也可以使用ul li，不過這樣就會選擇所有列表項了。

ul > li:only-of-type {
   font-weight: bold;
}

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

30. X:first-Of-Type first-of-type允許我們選擇同級元素的第一個。

一個測試

為便於理解，做個測試。復制下面的標簽

<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

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

這個代碼的意思是，在頁面中找到第一個無序列表，然后再找到其直接的子級元素(也就是li)，最后找到第二個li。

方法2

p + ul li:last-child {
   font-weight: bold;
}

在這個例子，先查找與p標簽直接相鄰的ul標簽，然后再找倒數第一個li(也就是第二個li)。

方法3

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

關於 css樣式查詢修改附贈網址

http://www.css88.com/book/css/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 這 30 類 CSS 選擇器，你必須理解！【WEB前端】CSS常用選擇器前端之css樣式（選擇器）。。。 CSS選擇器 CSS選擇器 css的各種選擇器前端筆記七，級聯樣式單與CSS選擇器(二) 前端：日期選擇器 CSS 加號選擇器（"+"） CSS ID選擇器(三)