CSS命中目標(biāo):CSSSel_CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
有了良好的基礎(chǔ)只是一個(gè)開(kāi)始,我們的代碼是分離的,我們要為CSS樣式找到目標(biāo)。假如正確有效的命中目標(biāo)就需要學(xué)習(xí)CSS Selector,即CSS選擇器(選擇符)的相關(guān)知識(shí)。
CSS的選擇器有多種多樣,隨著CSS版本的升級(jí),也有新的CSS選擇器出來(lái),我們的選擇器功能也將會(huì)更加的強(qiáng)大。但我們目前的一些瀏覽器對(duì)某一些選擇器的支持還不是很好。我們就從最基礎(chǔ)的開(kāi)始講起吧。
類(lèi)型選擇器是用來(lái)定位特定的HTML類(lèi)型元素,如標(biāo)題h1、段落p、錨元素a、內(nèi)聯(lián)元素span、無(wú)序列表ul、列表項(xiàng)li等等。這樣的選擇器除了叫類(lèi)型選擇器以外,還有另外兩個(gè)名字元素選擇器與簡(jiǎn)單選擇器�?聪旅娴睦�。
這些都是最典型的類(lèi)型選擇器,它的特點(diǎn)就在于定位非常簡(jiǎn)單而明確。但是假如文檔結(jié)構(gòu)比較復(fù)雜。不同部位的段落p、錨a可能是不同的樣式定義,我們?cè)撊绾螠?zhǔn)確的命中目標(biāo)呢?我們?cè)诤竺娴膬?nèi)容將會(huì)逐一進(jìn)行說(shuō)明。接下來(lái)的知識(shí)也可以搞定上面的這個(gè)小問(wèn)題。
后代選擇器是用來(lái)定位特定元素的后代。它的語(yǔ)法很簡(jiǎn)單,兩個(gè)選擇器之間加一個(gè)空格就行了。例如上面的問(wèn)題,我們作一個(gè)設(shè)置。
這樣設(shè)置以后。在列表以外的錨會(huì)有下劃線,而列表項(xiàng)的錨就不會(huì)帶有下劃線了。在前面的文章中,我們非凡講到了如何為id及class類(lèi)命名,或許也存在著濫用id與class的習(xí)慣。希望精確的控制代碼,但有時(shí)候是非常不必要的。我們完全可以通過(guò)選擇器輕松的命中目標(biāo)�?聪旅娴睦�。
同樣的錨鏈接元素,我們可以定義成兩種不同的色彩,我們完全沒(méi)有必要為它們各指定一個(gè)id或class。我們?cè)趯?shí)際操作中會(huì)發(fā)現(xiàn)一個(gè)有趣的現(xiàn)象,很多同樣的元素處于頁(yè)面中,只是位置不同罷了。我們通常都能通過(guò)給他們的父元素定義一個(gè)id。然后再用后代選擇器,就可以準(zhǔn)確的命中目標(biāo)了。
我們談一下偽類(lèi)選擇器pseudo-class,它們有如下的東東所構(gòu)成:
我們順序排列了這四個(gè)偽類(lèi)選擇器,請(qǐng)你要非凡注重它們的順序,L-V-H-A!這非常重要!不遵循這樣的規(guī)則,你的設(shè)置可能會(huì)失效!在這四個(gè)之中,link和visited兩者只能用于鏈接的錨元素。也就是說(shuō)只有a才能使用到它們。而hover和active、focus可以用在其它元素上面,稱(chēng)為動(dòng)態(tài)偽類(lèi),但非常遺憾,目前不是所有的瀏覽器都支持,所以最好不要使用這些動(dòng)態(tài)偽類(lèi),除非你有足夠的把握能面對(duì)瀏覽器不兼容的問(wèn)題。關(guān)于這方面的知識(shí),以后在MB5U.com中再具體的學(xué)習(xí)。
CSS的選擇器有多種多樣,隨著CSS版本的升級(jí),也有新的CSS選擇器出來(lái),我們的選擇器功能也將會(huì)更加的強(qiáng)大。但我們目前的一些瀏覽器對(duì)某一些選擇器的支持還不是很好。我們就從最基礎(chǔ)的開(kāi)始講起吧。
類(lèi)型選擇器是用來(lái)定位特定的HTML類(lèi)型元素,如標(biāo)題h1、段落p、錨元素a、內(nèi)聯(lián)元素span、無(wú)序列表ul、列表項(xiàng)li等等。這樣的選擇器除了叫類(lèi)型選擇器以外,還有另外兩個(gè)名字元素選擇器與簡(jiǎn)單選擇器�?聪旅娴睦�。
示例代碼 [m.hl5o.cn]
h1 {color:#f60;}
p {line-height:1.2em;}
a {text-decoration:underline;}
span {font-size:10px;}
p {line-height:1.2em;}
a {text-decoration:underline;}
span {font-size:10px;}
這些都是最典型的類(lèi)型選擇器,它的特點(diǎn)就在于定位非常簡(jiǎn)單而明確。但是假如文檔結(jié)構(gòu)比較復(fù)雜。不同部位的段落p、錨a可能是不同的樣式定義,我們?cè)撊绾螠?zhǔn)確的命中目標(biāo)呢?我們?cè)诤竺娴膬?nèi)容將會(huì)逐一進(jìn)行說(shuō)明。接下來(lái)的知識(shí)也可以搞定上面的這個(gè)小問(wèn)題。
后代選擇器是用來(lái)定位特定元素的后代。它的語(yǔ)法很簡(jiǎn)單,兩個(gè)選擇器之間加一個(gè)空格就行了。例如上面的問(wèn)題,我們作一個(gè)設(shè)置。
示例代碼 [m.hl5o.cn]
h1 {color:#f60;}
p {line-height:1.2em;}
a {text-decoration:underline;}
span {font-size:10px;}
li a {text-decoration:none;}
p {line-height:1.2em;}
a {text-decoration:underline;}
span {font-size:10px;}
li a {text-decoration:none;}
這樣設(shè)置以后。在列表以外的錨會(huì)有下劃線,而列表項(xiàng)的錨就不會(huì)帶有下劃線了。在前面的文章中,我們非凡講到了如何為id及class類(lèi)命名,或許也存在著濫用id與class的習(xí)慣。希望精確的控制代碼,但有時(shí)候是非常不必要的。我們完全可以通過(guò)選擇器輕松的命中目標(biāo)�?聪旅娴睦�。
示例代碼 [m.hl5o.cn]
#main a {color:#000;}
#sider a {color:#fff;}
<div id="main">
<a href="http://m.hl5o.cn/">MB5U.com</a>
</div>
<div id="sider">
<a href="http://m.hl5o.cn/">MB5U.com</a>
</div>
#sider a {color:#fff;}
<div id="main">
<a href="http://m.hl5o.cn/">MB5U.com</a>
</div>
<div id="sider">
<a href="http://m.hl5o.cn/">MB5U.com</a>
</div>
同樣的錨鏈接元素,我們可以定義成兩種不同的色彩,我們完全沒(méi)有必要為它們各指定一個(gè)id或class。我們?cè)趯?shí)際操作中會(huì)發(fā)現(xiàn)一個(gè)有趣的現(xiàn)象,很多同樣的元素處于頁(yè)面中,只是位置不同罷了。我們通常都能通過(guò)給他們的父元素定義一個(gè)id。然后再用后代選擇器,就可以準(zhǔn)確的命中目標(biāo)了。
我們談一下偽類(lèi)選擇器pseudo-class,它們有如下的東東所構(gòu)成:
示例代碼 [m.hl5o.cn]
a:link {color:#f00;}
a:visited {color:#f60;}
a:hover {color:#fc0;}
a:active {color:#000;}
input:focus {background:#ccc;}
a:visited {color:#f60;}
a:hover {color:#fc0;}
a:active {color:#000;}
input:focus {background:#ccc;}
我們順序排列了這四個(gè)偽類(lèi)選擇器,請(qǐng)你要非凡注重它們的順序,L-V-H-A!這非常重要!不遵循這樣的規(guī)則,你的設(shè)置可能會(huì)失效!在這四個(gè)之中,link和visited兩者只能用于鏈接的錨元素。也就是說(shuō)只有a才能使用到它們。而hover和active、focus可以用在其它元素上面,稱(chēng)為動(dòng)態(tài)偽類(lèi),但非常遺憾,目前不是所有的瀏覽器都支持,所以最好不要使用這些動(dòng)態(tài)偽類(lèi),除非你有足夠的把握能面對(duì)瀏覽器不兼容的問(wèn)題。關(guān)于這方面的知識(shí),以后在MB5U.com中再具體的學(xué)習(xí)。
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
猜你也喜歡看這些
- HTML表格標(biāo)記教程(38):表頭的邊框色屬性BORDERCOLOR
- CSS網(wǎng)頁(yè)布局應(yīng)該避免濫用div元素
- HTML表格標(biāo)記教程(47):表格嵌套
- HTML高級(jí)教程親和力的連接
- HTML高級(jí)教程文本
- 將XHTML CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面
- 入門(mén):HTML的基本標(biāo)簽和屬性簡(jiǎn)單介紹
- XHTML標(biāo)準(zhǔn)要點(diǎn)詳細(xì)介紹
- HTML表格標(biāo)記教程(35):跨列屬性COLSPAN
- HTML表格標(biāo)記教程(25):行的垂直對(duì)齊屬性VALIGN
- 相關(guān)鏈接:
- 教程說(shuō)明:
CSS教程-CSS命中目標(biāo):CSSSel
。