0 Comments

实例解析CSS选择符及其用法(3)

发布于:2013-11-06  |   作者:广州网站建设  |   已聚集:人围观
属性选择符(AttributeSelectors)

 

语法:(CSS选择符中的属性选择符具体再分为4种不同的表现方式)

1.E1[attr]
2.E1[attr=value]
3.E1[attr~=value]
4.E1[attr|=value]

说明:

1.选择具有attr属性的E1

2.选择具有attr属性且属性值等于value的E1

 3.选择具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于value的E1。

4.选择具有attr属性且属性值为一用连字符分隔的字词列表,由value开始的E1

非IE内核浏览器和IE7及以上浏览器支持,属于CSS2选择符。

实例:


  1. div[title]{color:#f00;}  
  2. <divtitledivtitle="测试的内容">测试的内容</div> 
  3.  
  4. div[class=a]{color:#f00;}  
  5. <divclassdivclass="a">测试的内容</div> 
  6. <divclassdivclass="ab">测试的内容</div> 
  7.  
  8. div[class~=a]{color:#f00;}  
  9. <divclassdivclass="a">测试的内容</div> 
  10. <divclassdivclass="ab">测试的内容</div> 
  11.  
  12. div[title|=a]{color:#f00;}  
  13. <divtitledivtitle="a">测试的内容</div> 
  14. <divtitledivtitle="abc">测试的内容</div> 
  15. <divtitledivtitle="a-b-c">测试的内容</div> 
  16.  

伪类选择符(CSSPseudo-ClassesReference)

语法:(CSS选择符中的伪类选择符共有10种)

1.Selector:link{sRules} 2.Selector:visited{sRules} 3.Selector:hover{sRules} 4.Selector:active{sRules} 5.Selector:focus{sRules} 6.Selector1Selector2:first-child{sRules} 7.Selector:first{sRules} 8.Selector:left{sRules} 9.Selector:right{sRules} 10.Selector:lang{sRules}

说明:

1.设置a对象在未被访问前的样式表属性。默认值由浏览器决定。对于无href属性(特性)的a对象,此伪类不发生作用。

2.设置a对象在其链接地址已被访问过时的样式表属性。默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无href属性(特性)的a对象,此伪类不发生作用。

3.设置对象在其鼠标悬停时的样式表属性。在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。

4.设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。

5.设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式表属性。

6.设置对象(Selector1)的第一个子对象(Selector2)的样式表属性。

7.设置页面容器第一页使用的样式表属性。仅用于@page规则。

8.设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。

9.设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。

10.设置对象使用特殊语言的内容样式表属性。 :link,:visited,:hover,:active属于CSS1,目前所有主流浏览器均支持a对象的该4种伪类选择符,非IE浏览器和IE7及以上浏览器还支持非a对象的:hover,:active;:focus,:lang属于CSS2,非IE核心浏览器及IE8支持。
广州网站建设,网站建设,广州网页设计,广州网站设计

实例:


  1. a:link{color:#f00;}  
  2. a:visited{color:#666;}  
  3. a:hover{color:#F60;text-decoration:none;}  
  4. a:active{color:#000;}  
  5. <ahrefahref="http://blog.doyoe.com/">css探索之旅</a> 
  6.  
  7. input:focus,a:focus{background:#f00;
  8. /*点击或按TAB键获得焦点时生效*/}  
  9. <ahrefahref="http://blog.doyoe.com/">css探索之旅</a> 
  10. <inputtypeinputtype="text"/> 
  11.  
  12. divem:first-child{color:#f00;}  
  13. <div><em>web</em>前端开发<em>权威指南</em></div> 
  14.  
飞机