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

時間  2019-11-21
標籤 前端 頁面 設計 常見的 css 選擇器 欄目 CSS 简体版
原文   原文鏈接

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

* {
 margin: 0;
 padding: 0;
}

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

 

  /*  選中容器中  全部子元素*/html

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

 

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X   -->   ID選擇器

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

 不過id選擇器具備惟一性的 並且渲染速度是最快的
css3

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

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

.error {
  color: red;
}

這是類選擇器。ID選擇器與類選擇器的差異是，後者能夠用於多個元素。使用類選擇器能夠把一樣的樣式賦予一羣元素，相反，id選擇器只能做用於特定的單一元素。
es6

兼容性

  • 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。
app

兼容性

  • 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。
url

 

兼容性

  • 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/ 

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