关闭

css3选择器

506人阅读 评论(0) 收藏 举报
分类:

 


1、基本选择器
浏览器支持情况:

  通配符选择器(*),all

  元素选择器(E),all

  类选择器(.className)所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。

  id选择器(#ID),all

  后代选择器(E F),all

  子元素选择器(E>F),IE6不支持子元素选择器。

  相邻兄弟元素选择器(E + F),IE6不支持这个选择器

  通用兄弟选择器(E ? F),IE6不支持这个选择器

   群组选择器(selector1,selector2,...,selectorN),all

2、属性选择器(均不支持ie6)

  1. E[attr]:只使用属性名,但没有确定任何属性值;
  2. E[attr="value"]:指定属性名,并指定了该属性的属性值;
  3. E[attr~="value"]:属性值有value时就相匹配而且等号前面的“?”不能不写;
  4. E[attr^="value"]:属性值是以value开头的;
  5. E[attr$="value"]:属性值是以value结束的;
  6. E[attr*="value"]: 属值中包含了value;
  7. E[attr|="value"]:  属性值是value或者以“value-”开头的值(比如说zh-cn);

2、伪类选择器

动态伪类 

  a:link       链接没有被访问时的样式
  a:visited  链接被访问过后的样式

  :hover      鼠标悬浮到元素上面时的效果,在IE6下只有a元素支持,:
  :active      鼠标点中元素时的效果,IE7-6不支持

  :focus       用于元素成为焦点,这个经常用在表单元素上,IE6-7下不被支持

 注:先后顺序,要让他们遵守一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active

 

UI元素状态伪类(不支持IE6-8

 :enabled

 :disabled

 :checked

eg:input[type="text"]:disabled {}

 

CSS3的:nth选择器

:first-child选择某个元素的第一个子元素;

:last-child选择某个元素的最后一个子元素;

:nth-child()选择某个元素的一个或多个特定的子元素(值可以是整数,也可以是表达式);

          eg:li:nth-child(n)=li{}//n是从0开始计算

               li:nth-child(2n)=li:nth(even){}//

               li:nth-child(2n-1)=li:nth(odd){}

               li:nth-child(n+5)//从第五个开始及以

               li:nth-child(-n+5)//从第五个开始及以

:nth-last-child()同上类似,只是从指定元素的元素的最后一个子元素开始算;

:nth-of-type()选择指定的元素,与nth-child类似,只是指定了子元素的类型;//实际意义并不是很大

:nth-last-of-type()选择指定的元素,从元素的最后一个开始计算//

:first-of-type选择一个上级元素下的第一个同类子元素//

:last-of-type选择一个上级元素的最后一个同类子元素;//:nth-child之类选择器就能达到这此功能

以上均不支持IE6-8和FF3.0-

:only-child选择的元素是它的父元素的唯一一个了元素;//IE6-8浏览器不支持

:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;//IE6-8和FF3.0-浏览器不支持

:empty选择的元素里面没有任何内容。//IE6-8浏览器不支持

:not() 选择不匹配的元素//IE6-8浏览器不支持:not()选择器

 

伪元素

::first-line选择元素的第一行,比如说改变每个段落的第一行文本的样式

::first-letter选择文本块的第一个字母//主要运用于段落排版上多,比如说首字下沉

::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动

::selection用来改变浏览网页选中文字的默认效果//只能设置两个属性,一个就是background,另一个就是color属性,只有IE9+版本支持,在Firefox中需要加上其前缀“-moz”

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:61338次
    • 积分:971
    • 等级:
    • 排名:千里之外
    • 原创:40篇
    • 转载:2篇
    • 译文:1篇
    • 评论:3条
    文章分类
    最新评论