您好,欢迎来到无锡中智培训学校电脑培训专业网!咨询电话:0510-82828991
分享到:
无锡中智职业培训学校七大校区就近上课:南禅寺校区、胜利门校区、河埒口校区、新区校区、恒隆校区、宜兴校区、江南校区

网页设计css3选择器基本介绍

时间:2014-12-19 13:29 作者:中智培训 点击:
  无锡中智培训老师表示,这些选择器还是比较简单的,就不再此一一举例样式了.还有随着各种浏览器的升级,也不在此讨论各种版本的浏览器对于属性样式的兼容和支持问题久了.
  一:属性选择器
  [attr=val]:属性attr是val;
  [attr*=val]:属性attr中包含val;
  [attr^=val]:属性attr中开头是val;
  [attr$=val]:属性attr结尾是val;
  二:伪类选择器
  :first-line,为某个元素中的第一行文字使用样式.
  :first-letter,为某个元素中的文字的首字母(欧美文字)或第一个字(中文或日文等汉字)使用样式.
  :before,在某个元素之前插入一些内容.
  例如:.gys:before{content:'思思博士';}
  :after,在某个元素之后插入内容.
  :root,有效文本区域,即html区域
  例子::root{ background:'red';}
  body{ background:"yellow";}
  这个时候整个页面背景就会变成黄色,而文本区域的背景色就是红色.
  :not,排除不需要的子元素
  例如:body *:not(h1){ color:red;} //body中所有的子元素,当时排除h1元素
  :empty,当元素内容为空白是使用的样式.
  :target,跳转到这个链接后,执行样式.
  例如:
  <a href="#test1">111111111111</a>
  <a href="#test2">222222222222222</a>
  <div id="test1">1111111111111111</div>
  <div id="test2">222222222222</div>
  #test1:target{ background-color:#000;}//跳转到id=test1时背景色变化
  :first-child,第一个子元素
  :last-child,最后一个子元素
  :nth-child(n),指定父元素中第n的子元素.n如果是odd偶数序列的子元素,even技术序列的子元素
  :nth-last-child(n),指定父元素中倒数第n的子元素,n如果是odd偶数序列的子元素,even基数序列的子元素
  :nth-of-type(n),指定同类型中的指定n.
  :nth-of-last-type(n),指定同类型中的倒数第n的元素.
  :nth-child(an+i),循环使用样式.
  例如:li:nth-child(4n+1){color:red;}
  li:nth-child{4n+2}{ color:bluee;}
  li:nth-child(4n+3){color:yellow;}
  li:nth-child(4n+4){color:black;}
  :only-child,当父元素中只有一个子元素时使用.
  例如:li:only-child{ color:red;}
  三,表单伪类选择器
  :active元素被激活(鼠标放下还没有抬起)
  :focus获得焦点时,
  :hover,鼠标悬浮在元素上
  例如:input[type='text']:active{ color:#F00;}
  input[type='text']:focus{ color:#F00; background-color:#960;}
  input[type='text']:hover{ color:#0F0;}
  :enabled,元素处于可用状态,
  :disabled,元素处于不可用状态
  :read-only,元素处于只读状态
  :read-write,元素处于非只读状态
  :checked,表单中radio或checkbox复选框处于选取状态时的样式
  :default,当页面打开时默认处于选取状态的单选框或复选框的样式.
  :indeterminate,用来指定页面打开时,如果一组单选框中任何一个单选框都没有设定选取状态时整租单选框的样式,如果用户选取其中任何一个单选框,这该样式被取消指定.目前只用opera支持.
  :selection,但元素处于选中状态时的样子.
  推荐:网页设计DW制作隔行换色的背景效果
       Dreamweaver设置段落格式

无锡中智教育 无锡电脑培训班 无锡网页设计培训 无锡平面设计培训
无锡市中智职业培训学校 无锡中智培训 专注电脑培训|网站地图
热线电话:400-8818-707 版权所有 无锡中智培训学校 WWW.WX68.COM Copyright ©2013 ALL Rights Reserved
备案号:渝ICP备09051384号-1
网站地图