css3选择器

原创 2015年07月09日 14:06:06

 


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”

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

js css3 仿iso 选择器

  • 2016年11月11日 11:20
  • 12KB
  • 下载

CSS3选择器

  • 2014年08月12日 11:28
  • 75KB
  • 下载

CSS3学习笔记 之 动态伪类选择器

动态伪类选择器为伪类选择器的一种,其语法如下: E: pseudo-class {property:value} 其中E为HTML中的元素,pseudo-class是CSS的伪类选择器名称,pr...
  • atleks
  • atleks
  • 2014年08月31日 23:53
  • 1369

CSS3层次选择器实例

  • 2016年08月22日 18:51
  • 743B
  • 下载

CSS3选择器总结

  • 2016年11月05日 20:30
  • 1.27MB
  • 下载

【CSS3】结构性伪类选择器—nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even)...

css3ui状态伪类选择器

  • 2016年08月22日 18:52
  • 1KB
  • 下载

CSS3序选择器学习记录

CSS3新选择器的学习,序选择器全纪录。

有关CSS3中的选择器(一)

关系选择器 1.       后代选择器(E F) 作为元素E的后代的任何元素F。 例如:ol元素中包含的li元素以及li元素中包含的a元素 2.       子选择器(E> F) 作为E元...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3选择器
举报原因:
原因补充:

(最多只允许输入30个字)