在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器：
#content
}
......
first-child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只能幫忙修復。不過自己其實也並沒有完全弄清，藉著這個問題，有理由總結一下css的所有選擇器。
基本選擇器也就是這幾種：*/tag/.class/#id，分別為通用元素選擇器/標籤選擇器/class選擇器/id選擇器，非常地簡單，就一筆帶過了。
多元素選擇器有：
對應的demo如下：
css選擇器1 - jsfiddlejsfiddle.net屬性選擇器有：
demo以及講解可以參考：
css選擇器2 - jsfiddlejsfiddle.net這類選擇器有：
沒有太多的坑，就不再細講
該類選擇器只有乙個：
demo如下：
css選擇器3 - jsfiddlejsfiddle.net該類選擇器有：
大部分都是常用的，也就不多說了。
注意最後的selection需要注意的是，::selection只能定義被選擇時的background-color，color及text-shadow(ie11尚不支援定義該屬性)。
該類選擇器有：
demo**如下：
css選擇器4 - jsfiddlejsfiddle.net
注意
first-child偽類選擇器選擇是它父元素的第乙個孩子的所有元素，這個父元素可以為任意的元素，比如body/div/section等等，所以p:first-child可以選擇大部分p標籤。另外偽類有更高的優先順序比元素選擇器。p:first-child會覆蓋掉div > p的樣式
:nth-child注意與nth-of-type的區別！可以參考demo看出二者的不一樣！
only-child注意與only-of-type的區別
該類選擇器只有乙個：
css選擇器5 - jsfiddlejsfiddle.net承接最開始的問題，想必大家都清楚使用first-child會帶來的問題了吧？而且應該也能給出對應的解決方案了吧？
最全css3選擇器
difference between div > p and first-child selector
CSS總結 CSS選擇器
css3選擇器最新部分，有人也稱這種選擇器為css3結構類，下面我們通過實際的應用來具體了解他們的使用和區別，首先列出他具有的選擇方法 first child選擇某個元素的第乙個子元素 last child選擇某個元素的最後乙個子元素 nth child 選擇某個元素的乙個或多個特定的子元素 nth...
CSS選擇器總結
通用選擇器 選擇所有元素 css2 型別選擇器 element 根據型別選擇元素 css1 類選擇器 class 根據全域性屬性class的值選擇元素 css1 id選擇器 id 根據全域性屬性id的值選擇元素 css1 屬性選擇器 attr 基於屬性選擇元素 css2 attr val 選擇定義a...
CSS選擇器總結
今天在做demo的時候偶然發現 自己對css選擇器的使用並不熟練 遂即在w3school上把內容又看了一遍 下面做些整理 1.元素選擇器 直接使用標籤即元素選擇 html h1 h2 h2,p 同時應用在h2和p 2.萬用字元選擇器 使文件中所有元素的 color 屬性值指定為 red 3.類選擇器...