CSS命中目标:CSSSel_CSS教程
教程Tag:暂无Tag,欢迎添加,赚取U币!
缂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗霉閿濆牜鍤夋繛宸簼閺呮繈鏌涚仦鐐殤闁告梻鏁哥槐鎾存媴閹绘帊澹曢梻浣侯攰娴滎剟顢楅·鐛礛S闂傚倸鍊峰ù鍥х暦閻㈢ǹ绐楅柟鎵閸嬶繝鏌曟径鍫濆壔婵炴垶菤閺€浠嬫倵閿濆啫濡烽柛瀣崌瀹曟帡鎮欓弻銉ユ暪闂備礁鎼ú銊╁磻閻愮儤鍊垫い鎺嗗亾闁宠鍨块幃娆撳矗婢舵ɑ锛侀梻浣规偠閸斿酣宕伴弽褜鍤曞┑鐘崇閺呮悂鏌ㄩ悤鍌涘婵犵數濮烽弫鎼佸磻閻愬搫鍨傞悹杞拌濞兼牠鎮峰▎蹇擃伀闁绘繂鐖奸弻娑㈠焺閸愵亖妲堥梺缁樻尰閿曘垽寮婚垾鎰佸悑閹肩补鈧磭顔戦梻浣瑰▕閺€杈╂暜閿熺姴钃熼柕濞炬櫆閸嬪棝鏌涚仦鍓р槈妞ゅ骏鎷� 缂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗〒姘e亾閽樻繈姊洪鈧粔瀵哥玻濡ゅ懏鐓欓梺顓ㄧ畱婢ч箖鏌ら弶鎸庡仴闁哄本鐩俊鐑筋敊閻撳寒娼荤紓鍌欒閸嬫挸顭块懜闈涘闁绘挸鍟撮弻鏇熷緞閸繂顬夐梺缁樼箥娴滎亪寮婚敐鍛斀闁圭偓娼欓锟� 闂傚倸鍊搁崐鎼佸磹妞嬪孩顐介柨鐔哄Т绾惧鏌涢弴銊ョ€柛銉e妽缂嶅洭鏌嶉崫鍕殶妞わ富鍨辩换婵嬪閿濆棛銆愰梺鍝勭墱閸撶喎鐣峰Δ鈧オ浼村醇閻斿搫骞愰梻浣规偠閸庮垶宕濆澶嬪剭闁硅揪闄勯埛鎺戭熆鐠虹尨鍔熼弫鍫ユ⒑閸濆嫯顫﹂柛濠冪墪宀h儻绠涘☉妯溾晠鏌ㄩ弮鍌滃笡妞ゃ儲绋撶槐鎾诲磼濞嗘垵濡介梺鍝ュ仜椤兘鐛箛娑欐櫢闁跨噦鎷� 闂傚倸鍊搁崐椋庣矆娓氣偓楠炴牠顢曢敃鈧悿顕€鏌eΔ鈧悧濠囧矗韫囨稒鐓欑紓浣靛灩閺嬫稒淇婇悙鎵煓闁哄备鈧剚鍚嬮幖绮光偓鑼晼闂備礁鎲¢〃鍡欏枈瀹ュ洦宕叉繛鎴欏灩楠炪垺淇婇婵愬殭闂傚绉撮埞鎴︻敋閸℃瑧蓱闂佸憡姊归〃濠囧春閳ь剚銇勯幒鎴濇灓婵炲吋鍔欓弻鐔碱敊閼测晛鐓熼悗瑙勬礃濞茬喖寮婚崱妤婂悑闁告侗鍨抽崢顒勬⒒娴h姤纭堕柛锝忕畵楠炲繘鏁撻敓锟�,闂傚倸鍊搁崐宄懊归崶顒佸剭妞ゆ劧绠戠粈瀣亜閹扳晛鐏╃悮姗€姊绘担绛嬪殭婵﹫绠撻敐鐐村緞鐎n剛顔曟繝鐢靛Т閸嬪棝宕甸弴銏$厱妞ゆ劧绲剧粈鈧紓浣插亾闁告劏鏂傛禍婊堟煛閸屾氨浠㈤柟顔藉灦閵囧嫯绠涢弴鐐寸€剧紓浣虹帛閻╊垶鐛€n喗鍊烽柡澶嬪灩濞堛倝姊绘担鍛靛綊顢栭崱娑樼闁搞儜灞剧稁闂佸憡绻傜€氀囧几鎼淬劍鐓欐い鏍ф鐎氼喗绂嶉鍫熲拻濞达絽鎲¢崯鐐烘煟閻旀潙鍔ら柟骞垮灩铻e〒姘煎灠濞堛劍绻濋悽闈浶g痪鏉跨Ч瀵煡骞栨担鍦弳闂佺粯娲栭崐鍦偓姘炬嫹!
有了良好的基础只是一个开始,我们的代码是分离的,我们要为CSS样式找到目标。假如正确有效的命中目标就需要学习CSS Selector,即CSS选择器(选择符)的相关知识。CSS的选择器有多种多样,随着CSS版本的升级,也有新的CSS选择器出来,我们的选择器功能也将会更加的强大。但我们目前的一些浏览器对某一些选择器的支持还不是很好。我们就从最基础的开始讲起吧。
类型选择器是用来定位特定的HTML类型元素,如标题h1、段落p、锚元素a、内联元素span、无序列表ul、列表项li等等。这样的选择器除了叫类型选择器以外,还有另外两个名字元素选择器与简单选择器。看下面的例子。
示例代码 [www.mb5u.com]
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;}
这些都是最典型的类型选择器,它的特点就在于定位非常简单而明确。但是假如文档结构比较复杂。不同部位的段落p、锚a可能是不同的样式定义,我们该如何准确的命中目标呢?我们在后面的内容将会逐一进行说明。接下来的知识也可以搞定上面的这个小问题。
后代选择器是用来定位特定元素的后代。它的语法很简单,两个选择器之间加一个空格就行了。例如上面的问题,我们作一个设置。
示例代码 [www.mb5u.com]
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;}
这样设置以后。在列表以外的锚会有下划线,而列表项的锚就不会带有下划线了。在前面的文章中,我们非凡讲到了如何为id及class类命名,或许也存在着滥用id与class的习惯。希望精确的控制代码,但有时候是非常不必要的。我们完全可以通过选择器轻松的命中目标。看下面的例子。
示例代码 [www.mb5u.com]
#main a {color:#000;}
#sider a {color:#fff;}
<div id="main">
<a href="http://www.mb5u.com/">MB5U.com</a>
</div>
<div id="sider">
<a href="http://www.mb5u.com/">MB5U.com</a>
</div>
#sider a {color:#fff;}
<div id="main">
<a href="http://www.mb5u.com/">MB5U.com</a>
</div>
<div id="sider">
<a href="http://www.mb5u.com/">MB5U.com</a>
</div>
同样的锚链接元素,我们可以定义成两种不同的色彩,我们完全没有必要为它们各指定一个id或class。我们在实际操作中会发现一个有趣的现象,很多同样的元素处于页面中,只是位置不同罢了。我们通常都能通过给他们的父元素定义一个id。然后再用后代选择器,就可以准确的命中目标了。
我们谈一下伪类选择器pseudo-class,它们有如下的东东所构成:
示例代码 [www.mb5u.com]
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;}
我们顺序排列了这四个伪类选择器,请你要非凡注重它们的顺序,L-V-H-A!这非常重要!不遵循这样的规则,你的设置可能会失效!在这四个之中,link和visited两者只能用于链接的锚元素。也就是说只有a才能使用到它们。而hover和active、focus可以用在其它元素上面,称为动态伪类,但非常遗憾,目前不是所有的浏览器都支持,所以最好不要使用这些动态伪类,除非你有足够的把握能面对浏览器不兼容的问题。关于这方面的知识,以后在MB5U.com中再具体的学习。
相关CSS教程:
- 相关链接:
- 教程说明:
CSS教程-CSS命中目标:CSSSel
。