CSS的魅力就是讓我們前端工程師像設(shè)計師一樣進行網(wǎng)頁的設(shè)計，我們能輕而易舉的改變顏色、布局、制作出漂亮的陰影效果等等，我們只需要改幾行代碼，不需要借助任何軟件，就能輕而易舉的實現(xiàn)，感覺就像魔法師一般，幾秒鐘就能得到一個想要的效果，是不是很酷呢。

CSS為我們提供了選擇器，這個酷酷的魔法工具，讓我們隨意能夠操作網(wǎng)頁元素的樣式，CSS選擇器眾多，我們不可能一次性學完，但是這30個CSS選擇器我們必須熟練記憶，可能有的同學覺得沒必要學這么多，掌握了id、class、后代選擇器就夠了，這算完事了嗎？如果是這樣你就錯過了很多靈活運用CSS的機會，雖然這些新屬性很多都屬于CSS3，但是我們掌握這些新屬性后還是有很大的好處的。

從本篇文章起，我給大家歸納了常用的30個CSS選擇器，希望通過我的總結(jié)，你能夠喜歡上這些常用的選擇器，廢話不多說，我們這篇文章將介紹前10個。

在介紹之前，我們先理解下文檔結(jié)構(gòu)樹的父子關(guān)系

在學習CSS選擇器之前，我們需要弄清楚文檔結(jié)構(gòu)的父子關(guān)系，什么是父元素、子元素以及祖輩元素和后代元素這些概念，清楚了這些邏輯關(guān)系后，你才能更好的掌握CSS選擇器。如下圖所示，我們用樹形結(jié)構(gòu)來表示一個文檔結(jié)構(gòu)。

如上圖所示，相鄰的兩個節(jié)點(層級是連續(xù)的)，他們之間是父子關(guān)系。如果兩個元素之間跨越兩個層級以上，它們是祖輩和后代的關(guān)系。

1、*：通用選擇器

針對初學者來說，我們還是從簡單的開始學起，首先我們來認識下通用選擇器，然后再逐步深入學習其它高級的選擇器，假如我們想讓文檔中的每個元素都顯示成紅色，我們可以這么做：

* {color:red;}

通用選擇器，可以匹配頁面所有的元素。 許多開發(fā)者可能會用這個技巧如下代碼所示讓元素居中，在開發(fā)測試階段固然是好的，但是我不建議這么做，因為這樣做會給瀏覽器增加很大的負擔。

* {
margin: 0;
padding: 0;}

瀏覽器兼容性：

• IE6+

• Firefox

• Chrome

• Safari

• Opera

2、#X：ID選擇器

ID選擇器的開頭使用#號，但是你在使用的時候，需要謹慎。

問問自己：是否真的需要使用ID選擇器來定義樣式

id選擇器比較局限，不能重用。因此需要慎重考慮。

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

瀏覽器兼容性：

• IE6+

• Firefox

• Chrome

• Safari

• Opera

3、.X：類選擇器

類選擇器的開頭用.(點)進行表示。與ID選擇器的區(qū)別就是可以重用。定義多個元素的樣式，好比按組進行歸類，同一類的樣式統(tǒng)一定義。

.error {
color: red;}

如果把兩個類串在一起，選擇的就是同時具有兩個類名的元素，類名的順序則無所謂，比如 , css 選擇器你也可以這樣寫 .warning .urgent。

瀏覽器兼容性：

• IE6+

• Firefox

• Chrome

• Safari

• Opera

4、X Y：后代選擇器

后代選擇器，英文名稱：descendant selector，本文的開頭我們學習了什么是后代元素，比如我們要選擇在li元素中包含a標簽的鏈接(不是文檔中所有的鏈接)，取消下劃線的默認樣式，我們可以這樣代碼實現(xiàn)：

li a {
text-decoration: none;}

經(jīng)驗分享: 如果你的選擇器看起來像X Y Z A B.error這樣就錯了。問問自己是否真的需要加入這么多負荷, 這樣寫的可讀性也太差了。還有一個需要注意的，后代元素的層級問題，可能會很深。

瀏覽器兼容性：

• IE6+

• Firefox

• Chrome

• Safari

• Opera

5、X：元素選擇器

假如你想針對Html預(yù)定義的標簽，比如類似：p,h3,em,a這些標簽，我們可以快速為某類標簽定義樣式。如下段代碼所示：

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

瀏覽器兼容性：

• IE6+

• Firefox

• Chrome

• Safari

• Opera

6、X:visited and X:link ：鏈接偽類選擇器

:link 偽類來定義所有還沒有點擊鏈接的樣式，:visited 偽類定義我們曾經(jīng)點擊過或者訪問過的鏈接樣式，示例代碼如下：

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

瀏覽器兼容性：

• IE7+

• Firefox

• Chrome

• Safari

• Opera

7、 X + Y：緊鄰?fù)x擇器

在同一個父元素中，選擇相鄰的同級別的元素，我們可以使用緊鄰?fù)x擇器(adjacent selector)。如若想把緊跟在h1元素的段落上外邊距去掉，你可以這么寫：

h1 + p { margin-top:0 }

瀏覽器兼容性：

• IE7+

• Firefox

• Chrome

• Safari

• Opera

8、 X > Y：子元素選擇器

有時候我們并不想選擇所有的后代元素，而是想縮小范圍，只選擇一個元素的子元素，比如我們只想選擇 #container>ul 定義id為container的div里的ul元素，而不是更深的后代元素比如li里的ul。

html文檔結(jié)構(gòu)：

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

css代碼如下:

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

文檔選擇樹形結(jié)構(gòu)：

代碼效果：

瀏覽器兼容性：

• IE7+

• Firefox

• Chrome

• Safari

• Opera

9、 X ~ Y：后續(xù)同胞選擇器

后續(xù)同胞選擇器使用 ~ 表示，選擇一個元素后面同屬一個父元素的另一個元素。這個選擇器和 X + Y 很像，但沒那么嚴格。后續(xù)同胞選擇器應(yīng)用會更廣泛。比如下面這個例子，我們選擇所有ul后面的P元素。

html文檔結(jié)構(gòu)：

<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><p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do eiusmod tempor. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p><p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p></div>

css代碼如下:

ul ~ p {
color: red;}

文檔選擇樹形結(jié)構(gòu)：

代碼效果：

瀏覽器兼容性：

IE7+ Firefox Chrome Safari Opera

10、 X[title]：簡單屬性選擇器

如果想選擇具有某個屬性的元素，而不管屬性的值是什么，我們可以使用簡單屬性選擇器。例如想讓帶有title屬性的鏈接標簽才會被匹配，沒有title屬性的標簽不會受到影響。你可以這么寫代碼：

a[title] {
color: green;}

瀏覽器兼容性：

IE7+ Firefox Chrome Safari Opera

總結(jié)

以上是生活随笔為你收集整理的css a标签去掉下划线_这30个CSS选择器，你必须熟记（上）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。