CSS選擇器中類型和后代選擇器使用秘笈
本文向大家簡單介紹一下CSS類型選擇器與后代選擇器的使用，在前面的內容中，我們學習了CSS代碼結構的一些基礎知識，如果正確有效的命中目標就需要學習CSS Selector，即CSS選擇器（選擇符）的相關知識。
CSS類型選擇器與后代選擇器
在前面的內容中，我們用四篇文章講了CSS代碼結構的一些基礎知識，有了良好的基礎只是一個開始，我們的代碼是分離的，我們要為CSS樣式找到目標。如果正確有效的命中目標就需要學習CSS Selector，即CSS選擇器（選擇符）的相關知識。
CSS選擇器有多種多樣，隨著CSS版本的升級，也有新的CSS選擇器出來，我們的CSS選擇器功能也將會更加的強大。但我們目前的一些瀏覽器對某一些選擇器的支持還不是很好。我們就從最基礎的開始講起吧。
CSS類型選擇器
CSS選擇器中類型選擇器是用來定位特定的HTML類型元素，如標題h1、段落p、錨元素a、內聯元素span、無序列表ul、列表項li等等。這樣的選擇器除了叫類型選擇器以外，還有另外兩個名字元素選擇器與簡單選擇器。看下面的例子。
ExampleSourceCode
- h1{color:#f60;}
- p{line-height:1.2em;}
- a{text-decoration:underline;}
- span{font-size:10px;}
這些都是最典型的類型選擇器，它的特點就在于定位非常簡單而明確。但是如果文檔結構比較復雜。不同部位的段落p、錨a可能是不同的樣式定義，我們該如何準確的命中目標呢？我們在后面的內容將會逐一進行說明。接下來的知識也可以搞定上面的這個小問題。
CSS后代選擇器
CSS選擇器中后代選擇器是用來定位特定元素的后代。它的語法很簡單，兩個選擇器之間加一個空格就行了。例如上面的問題，我們作一個設置。
ExampleSourceCode
- h1{color:#f60;}
- p{line-height:1.2em;}
- a{text-decoration:underline;}
- span{font-size:10px;}
- lia{text-decoration:none;}
這樣設置以后。在列表以外的錨會有下劃線，而列表項的錨就不會帶有下劃線了。在前面的文章中，我們特別講到了如何為id及class類命名，或許也存在著濫用id與class的習慣。希望精確的控制代碼，但有時候是非常不必要的。我們完全可以通過選擇器輕松的命中目標。看下面的例子。
ExampleSourceCode
- #maina{color:#000;}
- #sidera{color:#fff;}
- <dividdivid="main">
- <ahrefahref="http://www.52css.com/">52CSS.com</a>
- </div>
- <dividdivid="sider">
- <ahrefahref="http://www.52css.com/">52CSS.com</a>
- </div>
同樣的錨鏈接元素，我們可以定義成兩種不同的色彩，我們完全沒有必要為它們各指定一個id或class。我們在實際操作中會發現一個有趣的現象，很多同樣的元素處于頁面中，只是位置不同罷了。我們通常都能通過給他們的父元素定義一個id。然后再用后代選擇器，就可以準確的命中目標了。
偽類選擇器
我們談一下CSS選擇器中偽類選擇器pseudo-class，它們有如下構成：
ExampleSourceCode
- a:link{color:#f00;}
- a:visited{color:#f60;}
- a:hover{color:#fc0;}
- a:active{color:#000;}
- input:focus{background:#ccc;}
我們順序排列了這四個偽類選擇器，請你要特別注意它們的順序，L-V-H-A！這非常重要！不遵循這樣的規則，你的設置可能會失效！在這四個之中，link和visited兩者只能用于鏈接的錨元素。也就是說只有a才能使用到它們。而hover和active、focus可以用在其它元素上面，稱為動態偽類，但非常遺憾，目前不是所有的瀏覽器都支持，所以***不要使用這些動態偽類，除非你有足夠的把握能面對瀏覽器不兼容的問題。關于這方面的知識，以后在51cto.com中再詳細的學習。
【編輯推薦】
