今天下了杨正袆老师的"阿一web标准学堂"第3课：CSS选择符进阶知识http://www.cnblogs.com/JustinYoung/archive/2008/04/30/ayi03-selector-adv.html
对CSS有一个新的了解:
1.伪类和伪对象:
|
<html> <head> <style type="text/css" > //这里的link visited hover active 等就是伪类,他们主要依附于a标签,不能单独存在 a:link,a:visited,a:hover,a:active { Color:red; } //这里的first-line就是一个针对第一行的伪对象 #testId first-line { Color:red; } //这里的first-letter就是一个针对第一个字母的伪对象, //它的一个实体对象,所以说伪类对一类的标签,伪对象是对某一种实体 #testId first-letter { Font-size:200%; Float:right; } </style> </head> <body> //这里设置title属性,为了方便如蜘蛛等等搜 索引擎,搜索到网页 <a href=" #" title="测试">测试超链接</a> <div id ="testId"> 这是一个伪对象的测试文字, 这是一个伪对象的测试文字 </div> </body> </html> |
2. 伪类选择符进阶知识
|
<html> <head> <style type="text/css" > //这里的link visited hover active 等就是伪类,他们主要依附于a标签,不能单独存在 a:link,a:visited,a:hover,a:active { Color:red; } //这是错误的写法,这样会改写上面的visited hover active,真正生效的是link #testId a:link, a:visited,a:hover,a:active { Color:blue; } //正确的写法是: #testId a:link, #testId a:visited, #testId a:hover, #testId a:active { Color:blue; } </style> </head> <body> <a href=" #" title="测试">测试超链接</a> <div id ="testId"> <a href=" #" title="测试">测试超链接</a> </div> </body> </html> |
3.clear:both是消除两旁的float对象
|
.clear { } |
4. 属性选择符进阶知识
|
<style type="text/css"> 外站链接
//判断是否为外站链接 a[target="_blank"]{ padding-right:12px; background:url('outLink.gif') no-repeat center right; } [att$=val]
//在属性中以某值结尾 a[href$=".zip"] { padding-right:16px; background: url('icon_zip.gif') no-repeat center right; } [att^=val]
//在属性中以某值开头
a[href^="mail"] { padding-right:16px; background: url('icon_mailto.gif') no-repeat center right; } [att*=val]
//属性中包含某些值 a[href*="www.cnblogs.com"] { padding-right:16px; background: url('icon_cnblog.gif') no-repeat center right; } </style>
|
|
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" /> <meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例页面</title> <style type="text/css"> *{ font-size:14px; } </style> </head> <body> <h3>伪类</h3> <style type="text/css"> a:link,a:visited,a:active{ color:red; } a:hover{ color:blue; } .testLink2:link,.testLink2:visited,.testLink2:hover,.testLink2:active{ color:yellow; } /*** 错误演示 #pseudo_classe a:link,a:visited,a:active{ color:green; } ***/ #pseudo_classe a:link,#pseudo_classe a:visited,#pseudo_classe a:active{ color:green; } </style> <a href="http://justinyoung.cnblogs.com/" title="测试用链接" >这是一个链接</a><br /> <a href="http://justinyoung.cnblogs.com/" title="测试用链接2" class="testLink2">这是一个链接2</a><br /> <div id="pseudo_classe"> <a href="http://justinyoung.cnblogs.com/" title="测试用链接3" >这是一个链接3</a> </div> <h3>伪对象</h3> <style type="text/css"> #pseudo_element:first-line{ color:red; } #pseudo_element:first-letter{ font-size:260%; float:left; } </style> <div id="pseudo_element"> 阿一web标准学堂是一套面向web标准初学者的视频系列。虽然我也只是一个web标准刚入门的学习者，但是我还是希望能通过这个学堂将自己学习到的东西与大家分享，这样不仅可以让更多的朋友走上web标准设计的道路，更重要的是可以得到很多前辈们的指点和教导，从而更快的取得进步。所以，各位朋友如果在学堂上发现错误之处，欢迎你到【博客园web标准设计小组】交流讨论，从而帮助更多的人取得更快的进步。 </div> <h3>伪类进阶(IE7以上浏览器)</h3> <style type="text/css"> #pseudo_classe_ad{ 88px; height:31px; background:url('http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/message1.gif') no-repeat; cursor:pointer; } #pseudo_classe_ad:hover{ background:url('http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/message2.gif') no-repeat; } #pseudo_classe_ad2{ border:1px solid #999; } #pseudo_classe_ad2:hover{ border:1px solid #333; /*** 变化不明显可以用红色 ***/ } </style> <div id="pseudo_classe_ad"> </div> <br /> <input type="text" id="pseudo_classe_ad2" /> <h3>属性选择符进阶知识</h3> <style type="text/css"> a[target="_blank"]{ padding-right:12px; background:url('http://www.cnblogs.com/images/cnblogs_com/justinyoung/common/outLink.gif') no-repeat center right; } a[href$=".zip"] { padding-right:16px; background: url('http://www.cnblogs.com/images/cnblogs_com/justinyoung/common/icon_zip.gif') no-repeat center right; } a[href^="mail"] { padding-right:16px; background: url('http://www.cnblogs.com/images/cnblogs_com/justinyoung/common/icon_mailto.gif') no-repeat center right; } /*** 和伪类配合实现更好的效果 ***/ a[href^="mail"]:hover{ background: url('http://www.cnblogs.com/skins/ChinaHeart/images/titleICO.jpg') no-repeat center right; } /*** 和伪类配合实现更好的效果 ***/ a[href*="www.cnblogs.com"]{ /*** 可以先以cnblogs看看效果 ***/ padding-right:16px; background: url('http://www.cnblogs.com/images/cnblogs_com/justinyoung/common/icon_cnblog.gif') no-repeat center right; } </style> <a href="#" title="本站链接">本站链接</a><br /> <a href="http://justinyoung.cnblogs.com/" title="外站链接" target="_blank">外站链接</a> <br /> <a href="http://justinyoung.cnblogs.com/download.zip" title="zip文件">zip文件是.zip结尾的链接</a><br /> <a href="mailto:dushizhuma@163.com" title="给我电邮">给我电邮，是以mailto开头的链接</a><br /> <a href="http://www.cnblogs.com" title="包含博客园网址">包含www.cnblogs.com链接的地址</a> <h3>选择符的优先级</h3> <!--======新建一个文件======--> <h4>元素选择符，从上到下</h4> <style type="text/css"> div{color:red;} div{color:blue;} </style> <div> 这里是div </div> <h4>元素选择符和class</h4> <h4>class和id</h4> <div id="div_id1" class="div_class1"> <div class="div_class2"> 这里是测试文字。 </div> </div> <h4>id和style</h4> <h4>元素、class和id</h4> <div id="div_id1" class="div_class1"> <div class="div_class2" id="div_id2"> <span>这里是测试文字</span> </div> </div> </body> </html> |
