因為想在頁面中控制乙個元素的樣式太困難太麻煩了。使用內聯css基本上宣布了放棄介面的可維護性；使用js修改樣式，寫不好的話，維護性也等同於零。而css樣式表是原生的維護性最好的外掛程式，好的樣式表，可以控制整站樣式。更關鍵的是，jquery也使用css篩選器來抓取dom引用。因此，css篩選器，是前端攻城屍必修課之一。
篩選器，翻譯成普通話，就是乙個或一組判斷條件。頁面中有不計其數的dom，這些dom之間的關係又非常複雜，篩選器的目的，就是找到某個或某類符合條件的dom，方便其他程式對這些dom進行修改。因此，篩選器應該能描述兩種資訊：一是要尋找的dom的特性，而是要尋找的dom與其他dom的關係。
css中一共有四種篩選器（這是我自己分的），從四個角度描述dom的特定：
（1）元素篩選器：p 、h2 、*
直接用html標籤名稱進行篩選，如p表示所有段落、h2表示所有二級標題。這裡有乙個特殊標籤就是*，表示所有。元素篩選器規定的樣式，會應用到所有元素，因此只在這裡設定諸如字型、字型大小一類的通用樣式。
（2）類篩選器：.classname1
這是針對含有class屬性的標籤而言的。html標籤中規定了class屬性，對應的類篩選器就會把這些dom找到。類篩選器和元素篩選器一樣，都是多元素篩選，即有多個dom的class都設定成classname，那麼這些dom的樣式都會被改變。我本人不太喜歡類篩選器，因為在html中新增class也是意見很麻煩的事。
（3）id篩選器：#idstring
id篩選器用法和類篩選器很類似。但篩選的目標從class屬性變成了id屬性。不同在於，類篩選器會找出所有滿足條件的dom，而id篩選器只找出第乙個符合條件的dom。因此，在html中把兩個標籤的id設定成乙個值，第二個標籤的id屬性等於沒用。
（4）屬性篩選器：[attr=value]
屬性篩選器和類篩選器一樣，也是多dom選擇，但又更泛化了，可以通過這個篩選一些自定義屬性或者比較奇怪的屬性，比如href、src。屬性篩選器更強大的是，對value的匹配，有好幾個運算子：
[attr]用於選取帶有指定屬性的元素。
[attr = value]
用於選取帶有指定屬性和值的元素。
[attr ~= value]
用於選取屬性值中包含指定詞彙的元素（基本等同於*）。
[attr |= value]
用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞（基本等同於^）。
[attr ^= value]
匹配屬性值以指定值開頭的每個元素（常用）。
[attr $= value]
匹配屬性值以指定值結尾的每個元素
（常用）。
[attr *= value]
匹配屬性值中包含指定值的每個元素
（常用）
。css中一共有五種篩選器組合方式，從五個角度描述待尋找dom與其他dom之間的關係。
（1）逗號組合：h1, h2, h3
逗號組合描述了一種並集的關係，即當前元素，滿足任何乙個篩選器，就應用樣式。比如上面的例子，如果當前標籤是h1、h2、h3中任意一種，那麼應用樣式。
（2）無間斷組合：div.classname1
乙個以上篩選器（一般是不同型別的篩選器），直接連在一起，中間沒有任何分隔符。 這表示一種交集的關係，即當前元素，必須滿足所有篩選器，才能被應用樣式。比如上面的例子，如果當前元素是div標籤，並且class屬性為classname1，那麼應用樣式。
（3）空格組合：div .classname1 （注意與上面的區別，div後面有乙個空格）
乙個以上篩選器（類別無所謂），之間存在空格。這表示一種孩子關係，空格前面的是父親、空格後面是孩子。意思是先找出父親，然後在父親內部找出孩子。比如上面的例子，篩選過程是先找到div標籤a，然後在a的內部找class等於classname1的標籤b，然後對標籤b使用樣式。注意，不對a進行樣式修改，只對b進行修改，另外b未必是a的直接孩子，b只要在a的內部即可。
這種組合是非常非常常用的。也是我不喜歡類篩選器的原因。
（4）直接孩子組合：div > .classname1
在空格組合中，細心的朋友可能已經注意到了，只要b在a的內部，那麼就會被篩選出來。這樣是否太寬泛了點，篩選的內容是否會多了點。很多時候，我們只需要找出直接孩子，而不希望找出孩子的孩子。比如：
[html]view plain
copy
<
style
>
div p
style
>
<
div>
<
p>title1
p>
<
table
>
<
tr>
<
td>
<
p>title2
p>
<
div>content1
div>
<
p>title3
p>
<
div>content2
div>
td>
tr>
table
>
div>
樣式a的意思是，div標籤中，所有的p標籤文字顏色設定成紅色（這裡當然可以用h1、h2、h3避免，我們只是舉個例子）。所以title1-3都是紅色的。但有時候，我們希望title1是紅色的，而title2和title3都是灰色的，因此，要對樣式表做如下修改：
[css]view plain
copy
（5）兄弟組合：
div + .classname1
和直接孩子組合類似，兄弟組合也規定了一種dom和dom之間的關係。上面例子翻譯過來是：找到乙個class屬性等於classname1的標籤a，a的」前面「有乙個div標籤b。請注意」前面「的含義，意思就是a和b緊挨著，並且a和b有共同的父親，並且a在b後面渲染。那麼，借用上面的例子，如果想讓content1和content2的字型變成宋體，該怎樣寫樣式表？如下：
[css]view plain
copy
篩選器 補充
篩選器指的是在已經通過選擇器選中了元素後，在此基礎上進一步選擇。首先通過 div 選擇了多個div元素，接下來做進一步的篩選 first 第1個元素 last 最後乙個元素 eq num 第num個元素 注 num基0 parent 選取最近的乙個父元素 parents 選取所有的祖先元素 chil...
css計數器詳解
就是採用css給一些html元素自動生成編號，比如類似1.3.2這種，先看個效果 對，就是這種類似word裡面很常見的效果，如下 進風口的爽膚水 非進口商的 非進口商的 非進口商的 進風口的爽膚水 非進口商的 非進口商的 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 非進口...
使用TopN篩選器
最近接到乙個需求，需要在會員接到 時顯示該會員在最近7天內按照問題型別統計的來電量進行top排名，從而可以獲知該使用者可能遇到的問題從而進行更好的服務於會員。由於前面的相關事實表和維度表都是現成的，只需要稍微在模型上建立好關聯即可。ok後發布進行報表開發。之前用rank和top都搞過這種排名的報表開...