淺談CSS選擇器

       CSS選擇器可以說是CSS里的核心之一，CSS一般都要通過選擇器對不同的元素進行控制，并賦予各種樣式規則來實現各種效果。什么是選擇器呢？

      每一條CSS樣式定義由兩部分組成，形式為“選擇器{樣式}”，在“{}”之前的部分就是“選擇器”。 “選擇器”指明了“{}”中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素。

      簡單的說CSS選擇器有通配選擇器、標簽選擇器、類選擇器以及ID選擇器。通配選擇器就是“*”，例如“*{color:red;}”，它可以匹配所有的元素，但它的級別最低。標簽選擇器的級別僅高于通配選擇器，以HTML文檔里的各種標簽組成。類選擇器是CSS里最靈活的一種選擇器，他通過類名可以對HTML文檔里設置了相同類名的元素進行批量控制，他以“.”加上類名組成，例如“.lleft {margin-left: 20px;}”。ID選擇器也是CSS里非常重要的一類選擇器，因為ID名在HTML文檔中不能重復，只能對單個的元素進行控制，但它的級別是除了行內樣式以及添加“！important”標記樣式外級別最高的，他對頁面里的某些關鍵的樣式規則起著非常重要的作用，它由“#”加ID名組成，例如“#nav {padding:0;}”。這些選擇器多數時候都會組合使用，因此就產生了其他的一些復雜的選擇器。下面簡單的說說部分復雜選擇器：

       1、派生選擇器。派生選擇器也叫包含選擇器，是由上述簡單選擇器通過添加空格來組成，例如“p .intro {color:red;}”，他會選擇“p”標簽元素里面包含有“intro”類的元素，注意他與“p.intro {color:red}”的區別，后者“p”與“intro”之間沒有空格，它表示選擇設置了“intro”類的“p”標簽元素。

       2、子選擇器。子選擇器是通過簡單選擇器添加“>”來組成，例如“ul>li {list-style-type:none}”，選擇了“ul”標簽的子元素“li”標簽元素。注意它與派生選擇器的區別，派生選擇器不一定是子元素與父元素之間，只要一個元素包含在另一個元素內即可以被選擇，而子選擇器只能在父元素與子元素之間才有效。子選擇器與派生選擇器都能多次使用，例如“body>h2>ul>li{padding:5px;}”與“#nav h2 a{font-weight:normal;}”。

       3、臨近同胞選擇器。它使用一個“+”把一個元素與下一個元素連接起來，例如，為了選擇“h2”標簽后的第一個段落，則可以用“h2+p {}”這樣的選擇器，只有在“h2”標簽元素后的第一個“p”標簽元素才會獲得相應的樣式規則，只有兩者相鄰才有效。

       4、屬性選擇器。屬性選擇器是簡單選擇器后用“[]”添加它所相關元素的某項屬性，例如“.photo[title] {}”，選擇了帶有“title”屬性的“photo”類元素。利用屬性選擇器，可以挑選帶有特定屬性的標簽元素或類元素，它也可以單獨使用，例如“[title]{}”。屬性選擇器也可以具體一點，可以附加上屬性的屬性值，可以選擇那些不僅共享特定屬性而且帶有精確屬性值的元素，例如“a[] {}”。

       5、偽類選擇器。CSS偽類主要用于向某些選擇器添加特殊的效果。一般用的比較多的是錨偽類，也就是超鏈接“a”標簽元素的偽類，包括“a:link {}”、“a:visited”、”a:hover {}”與“a:active {}”，它們分別對未訪問的、已訪問的、鼠標指到的與選定點擊時的超鏈接進行樣式規則設置，”a:hover {}”還可以使用在其它元素上。還有其他的偽類選擇器，像“:first-child {}、:after {}、:befor {}、:lang {}、:focus {}”等等，例如“p:first-child{color:red};”，這里的樣式規則將使用在第一個“p”標簽元素上，注意這里的“p”標簽元素必須是其父元素了所有子元素里的第一個元素，否則無效。在CSS3中新增了更多的偽類選擇器，像“:first-of-type {}、 :last-of-type {}、 :only-child {}”等等。

       當給一個元素設置樣式規則時，這個樣式規則規則會與默認規則競爭，但是由于它具有較高的層疊優先級，所以會覆蓋默認規則。并且CSS支持給同一個元素多次設置相同的樣式規則，一般元素會使用離它最近的規則，若有沖突，瀏覽器就要要使用層疊順序來確定一組競爭規則中真正生效的樣式規則。