css3技术

CSS选择符的用法_div+css教程(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-17 16:58 我要评论( )

div[title|=a]{color:#f00;} div title=a测试的内容/div div title=a b c测试的内容/div div title=a-b-c测试的内容/div 伪类选择符(CSS Pseudo-Classes Reference) 语法:(伪类选择符共有10种) 1. Selector:link

  div[title|=a]{color:#f00;}
  <div title="a">测试的内容</div>
  <div title="a b c">测试的内容</div>
  <div title="a-b-c">测试的内容</div>

伪类选择符(CSS Pseudo-Classes Reference)

  语法:(伪类选择符共有10种)
  1. Selector:link{ sRules }
  2. Selector:visited{ sRules }
  3. Selector:hover{ sRules }
  4. Selector:active{ sRules }
  5. Selector:focus{ sRules }
  6. Selector1 Selector2: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支持。

  实例:
  a:link{color:#f00;}
  a:visited{color:#666;}
  a:hover{color:#F60;text-decoration:none;}
  a:active{color:#000;}
  <a href="">css探索之旅</a>

  input:focus,a:focus{background:#f00;/* 点击或按TAB键获得焦点时生效 */}
  <a href="">css探索之旅</a>
  <input type="text" />

  div em:first-child{color:#f00;}
  <div><em>web</em>前端开发<em>权威指南</em></div>

伪对象选择符(CSS Pseudo-Elements Reference)

  语法:(伪对象选择符共有4种)
  1. Selector:first-letter
  2. Selector:first-line
  3. Selector:before
  4. Selector:after

  说明:
  1. 设置对象内的第一个字符的样式表属性。此伪对象仅作用于块元素。内联元素要使用该伪对象,必须先设定对象具有块元素的表状。
  2. 设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象具有块元素的表状。
  3. 用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。
  4. 用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。

  这几个伪对象选择符都为属于CSS2选择符,其中:first-letter和:first-line目前所有主流浏览器均支持;:before和:after非IE核心浏览器及IE8支持。

  实例:
  div:first-letter {color:#f00;}
  <div>我是一只丑小鸭,伊啊伊啊哟</div>

  div:first-line {color:#f00;}
  <div>我是一只丑小鸭,伊啊伊啊哟</div>

  div:before {content:"web";}
  <div>前端开发</div>

  div:after {content:"...";}
  <div>大段的文字</div>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评