一、基礎選擇器
css基礎選擇器有標籤選擇器、類選擇器、id選擇器、通用選擇器
1.標籤選擇器
每個html頁面都由很多個標籤組成，通過標籤選擇器可以對某類標籤應用相應的樣式，chrjslj如對p標籤應用下面的樣式，則頁面中所有的p標籤都會生效
複製**
**如下: p
2.類選擇器
類選擇器是css非常常用的選擇器，在html中可以為某個標籤增加class屬性，如
複製**
**如下:
則可以為對應的class設定樣式
複製**
**如下:
error
類選擇器可以復用，如對頁面中的p標籤也可以應用此樣式
複製**
**如下:
this is a test!
另外，乙個標籤可以有多個類選擇器，不同的值用空格隔開，這樣多個樣式便可以應用的乙個標籤上。
3.id選擇器
id選擇器和類選擇器一樣，用的也很頻繁，但是id在每個html頁面的值必須是唯一的，所以它不可以復用，如：
複製**
**如下:
這裡補充說明下id與class的命名規範，命名時盡可能的保持名稱與表現形式無關，如 某段提示文字顯示為紅色，可以命名為red，但是若日後改成藍色，則程式設計客棧red名與之不對應，更好的選擇如error或tips。所以應該根據它是什麼來命名 而不是 根據 它的外觀如何來命名。
4.通用選擇器
不同於上面的三種選擇器，通用選擇器要強大的多，它可以對頁面中的所有html標籤應用樣式，當然也正是因為如此強大，反而限制了它的靈活性，在實際應用中用的較少。一般簡單的css reset會用到，如：
複製**
**如下: *
二、組合選擇器
1.群主選擇器
在使用選擇器時,有的元素樣式是一樣的，每次都為不同的選擇器單獨定義樣式的話太繁瑣，這時我們便可以使用群主選擇器集中定義樣式。不www.cppcns.com同標籤或類以逗號隔開。如：
複製**
**如下:
div, h2, .error
這樣我們便同時給div, h2, .error一起定義了樣式。
2.子選擇器
當我們想讓父元素下的某個子元素表現為特定的樣式時，我們可以用子選擇器，如
複製**
**如下:
div>a
此時，div下的子元素a都將變成藍色字型，無下劃線。
3.後代選擇器
在上面的例程式設計客棧子中，利用子選擇器，只可以設定div下的子元素a，但是若想改變div下的所有a標籤的樣式，就需要用到後代選擇器。**如下:
複製**
**如下:
div a
4.同胞選擇器
除了上面的子選擇器與後代選擇器，我們可能還希望找到兄弟兩個當中的乙個，如乙個標題h1元素後面緊跟了兩個段落p元素，我們想定位第乙個段落p元素，對它應用樣式。我們就可以使用相鄰同胞選擇器。看下面的**：
複製**
**如下:
h1 + p
三、屬性選擇器說明：以下提到的e表示元素，attr表示屬性，val表示屬性的值
1.e[attr]選擇器
匹配所有具有attr屬性的e元素，不考慮它的值。如以下**可以匹配所有含有title屬性的p元素。
複製**
**如下:
p[title]
2.e[attr=val]
匹配所有attr屬性值為val的e元素。如匹配所有class值為test的p元素
複製**
**如下:
p[class="test"]
3.e[attr~=val]
匹配具有attr屬性且屬性值為用空格分隔的字元列表，其中乙個值等於val的e元素。如：
複製**
**如下:
p[class~="name"]
複製**
**如下:
111111
111111
則第乙個div會應用上面的樣式。
4.e[attr|=val]
匹配具有attr屬性且屬性值為用連線符分隔的字串，並以val開頭的e元素。
複製**
**如下:
p[class|="test"]
111111
111111
則第二個div會應用上面的樣式。
最後不得不提的是ie6不支援子選擇器、同胞選擇器和屬性選擇器，因此使用時需注意。
css優先順序
優先順序算是css中的乙個非常重要的知識點，也是筆試面試中經常會考到的知識點。
一、什麼是css優先順序
css優先順序，即是指css樣式在瀏覽器中被解析的先後順序。
二、css優先順序規則
比較簡單易記的一種方法就是給不同選擇器分配不同的值：
1.id選擇器預設優先順序最高，其權值為100
2.class選擇器、屬性選擇器和偽類選擇器的權值為10
3.標籤選擇器的優先順序較低，其權值為1
所以在比較樣式的優先順序時，只需統計選擇符中的id、class、標籤名個數，然後把對應的權值相加即可。根據結果便可得出優先順序高低。
1.結果較大的優先順序較高
2.結果相同，則後定義的樣式優先順序較高
3.如果樣式值中含有!important，則該值優先順序最高
舉例：
複製**
**如下:
h2//其權值為1
#content//其權值為100p
.test//其權值為1+10=11
#main div .test//其權值為100+1+10=111div
#main .left #n**//其權值為1+100+10+100=211
本文標題: css選擇器優先順序深入理解
本文位址:
選擇器優先順序 CSS選擇器優先順序總結
css選擇器優先順序這個問題，相信有點經驗前端都會認為非常簡單，但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧，一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表，為了保持不同瀏覽器下樣式相同，所以我們的自定義樣式表一般都會覆...
CSS 選擇器優先順序
css優先順序包含四個級別 文內選擇器，id選擇器，class選擇器，元素選擇器 以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。css優先順序的計算規則如下 頁面中直接設定style,加1,0,0,0 每個id選擇器 如 id 加0,1,0,0 每個class選擇器 如 c...
css選擇器優先順序
css優先順序即css樣式在瀏覽器中被解析出來的先後順序。css優先順序包含四個級別 行內樣式，id選擇符，class類選擇符，元素選擇符 以及各級別出現的次數。繼承是css的乙個主要特徵，然後繼承的權重很低，比普通元素還要低。1.行內樣式 類似css 的樣式 的優先順序為1，0，0，0，始終高於外...