1、css 元素選擇器
最常見的 css 選擇器是元素選擇器。換句話說，文件的元素就是最基本的選擇器。
1html
2h1
3 h2
2、css 選擇器分組
通過分組，創作者可以將某些型別的樣式「壓縮」在一起，這樣就可以得到更簡潔的樣式表。
1/* no grouping */
2h1
3h2
4h3
5h4
6h5
7h6 89
/* grouping */
10 h1, h2, h3, h4, h5, h6
3、css 類選擇器
類選擇器允許以一種獨立於文件元素的方式來指定樣式。
1<
h1 class
="important"
>
2this heading is very important.3h1
>45
6.important
7 或者 * .important
4、css id選擇器
id 選擇器允許以一種獨立於文件元素的方式來指定樣式。
1<
p id
="intro"
>this is a paragraph of introduction.
p>23
#intro
4 或者 *#intro
5、css 屬性選擇器
css 2 引入了屬性選擇器。
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
1<
planet
>venus
planet
>
2<
planet
moons
="1"
>earth
planet
>
3<
planet
moons
="2"
>mars
planet
>
45 planet[moons]
6、css 後代選擇器
後代選擇器（descendant selector）又稱為包含選擇器。
後代選擇器可以選擇作為某元素後代的元素。
1<
h1>this is a <
em>important
em> heading
h1>
2<
p>this is a <
em>important
em> paragraph.
p>
34 h1 em
7、css 子元素選擇器
與後代選擇器相比，子元素選擇器（child selectors）只能選擇作為某元素子元素的元素。
1<
h1>this is <
strong
>very
strong
>
<
strong
>very
strong
> important.
h1>
2<
h1>this is <
em>really <
strong
>very
strong
>
em> important.
h1>34
5 h1 > strong
8、css 相鄰兄弟選擇器
相鄰兄弟選擇器（adjacent sibling selector）可選擇緊接在另一元素後的元素，且二者有相同父元素。
1<
div>
2<
ul>
3<
li>list item 1
li>
4<
li>list item 2
li>
5<
li>list item 3
li>6ul
>
7<
ol>
8<
li>list item 1
li>
9<
li>list item 2
li>
10<
li>list item 3
li>
11ol
>
12div
>
1314 li + li
9、偽類
css 偽類用於向某些選擇器新增特殊的效果。
1）語法
偽類的語法：selector : pseudo-class
css 類也可與偽類搭配使用。
selector.class : pseudo-class
2）錨偽類
a:link /* 未訪問的鏈結 */a:visited /* 已訪問的鏈結 */
a:hover /* 滑鼠移動到鏈結上 */
a:active /* 選定的鏈結 */
10、偽元素
css 偽元素用於向某些選擇器設定特殊效果。
p:first-line
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...
CSS選擇器相關以及CSS選擇器的優先順序
首先，當我們給css中的選擇器設定樣式後，有一些屬性並沒有起作用。通過firebug檢視發現一些屬性被覆蓋了。那麼css的優先順序是如何的呢？在css中，基本選擇器諸如 id選擇器，class類選擇器，還有標籤選擇器。組合使用的時候，又有後代選擇器和群組選擇器。語法 id選擇器 id 文字相關 類選...
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...