首页 > 代码库 > CSS选择器

CSS选择器

一、基本选择器
选择器 描述 CSS版本
E 标签选择器,匹配所有使用E标签的元素  
* 通用元素选择器,匹配任何元素  
.info class选择器,匹配所有class属性中包含info的元素  
#footer id选择器,匹配所有id属性等于footer的元素  

比如:

复制代码
  
  
1 * { margin : 0 ; padding : 0 ; } 2 3 p { font-size : 2em ; } 4 5 .info { background : #ff0 ; } 6 7 p.info { background : #ff0 ; } 8 9 p.info.error { color : #900 ; font-weight : bold ; } 10 11 p#info { background : #ff0 ; }
复制代码

 

二、多元素的组合选择器

选择器 描述 CSS版本
E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号隔开
 
E F
后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔  
E>F 子元素选择器,匹配所有E元素的儿子元素F  
E+F
毗邻元素选择器,匹配所有紧随E元素之后的同级元素F  
E~F 匹配任何E标签之后的同级F标签 3

比如:

复制代码
  
  
1 div,p { color : #f00 ; } 2 #nav,li { display : inline ; } 3 #nav a { font-weight : bold ; } 4 div>strong { color : #f00 ; } 5 p+p { color : #f00 ; } 6 p~ul { color : #f00 ; }
复制代码

1、并列选择器(E,F,G,...)

  这类选择器之间用逗号作分割,能匹配选择器列出的所有标签元素。

2、后代选择器(E F; E>F)

  E F,标签之间用空格隔开,表示匹配E标签内所有F标签,所匹配的F标签不仅仅是E标签的儿子,还有可能是E标签的孙子,或者曾孙、从孙等等。

  E>F标签匹配所有为E标签儿子的F标签。

3、兄弟选择器(E+F;E~F)

  E~F选择其中F标签无需紧紧跟随E标签后面第一个,如果需要实现这样的一个功能可以用E+F选择器。对于IE浏览器来说只有IE6以上的版本才支持该选择器。

三、属性选择器

选择器 描述 CSS版本
E[attribute] 匹配所有具有attribute属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)  2.1
E[attribute=value] 匹配所有attribute属性等于“value”的E元素  2.1
E[attribute~=value] 匹配所有attribute属性具有多个空格分隔的值、其中一个值等于“value”的E元素  2.1
E[attribute|=value] 匹配这类E元素,它具有attribute属性的就是“value”或者以“value”开始并立即跟上一个“-”字符,也就是“value-”,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等  2.1
E[attribute^=value] 匹配所有attribute属性值是以“value”开始的E元素  3
E[attribute$=value] 匹配所有attribute属性值包含有“value”的E元素  3
E[attribute*=value] 匹配所有attribute属性值是以"value"结束的E元素  3

比如: 

CSS

 

四、伪类选择器

选择器 描述 CSS版本
E:first-child 匹配父元素的第一个子元素E 2.1
E:link 匹配所有未被点击的链接 2.1
E:visited 匹配所有已被点击的链接 2.1
E:active 匹配鼠标已经其上按下、还没有释放的E元素 2.1
E:hover 匹配鼠标悬停其上的E元素 2.1
E:focus 匹配获得当前焦点的E元素 2.1
E:lang(c) 匹配lang属性等于c的E元素 2.1
E:enabled 匹配表单中激活的元素 3
E:disabled 匹配表单中禁用的元素 3
E:checked 匹配表单中被选中的radio或者checkbox元素 3
E::selection 匹配用户当前选中的元素 3
E:root 匹配文档的根元素,对于HTML文档,就是HTML元素 3
E:nth-child(n) 匹配其父元素的第n个子元素,n从1开始计算 3
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1 3
E:nth-of-type(n) 与:nth-child(n)作用类似,用作匹配使用同种标签的第n个元素 3
E:nth-last-of-type 与:nth-last-child作用类似,用作匹配同种标签的最后一个元素
3
E:last-child 匹配父元素的最后一个子元素,等同于E:nth-last-child(1) 3
E:first-of-type 匹配父元素下使用同种标签的第一个元素,等同于E:nth-of-type(1) 3
E:last-of-type 匹配父元素下使用同种标签的最后一个元素,等同于E:nth-last-of-type(1) 3
E:only-child 匹配父元素下仅有的一个子元素,等同于E:first-child:last-child或者E:nth-child(1):nth-last-child(1) 3
E:only-of-type 匹配父元素下使用相同标签的唯一一个子元素,等同于E:first-of-type:last-of-type或者E:nth-of-type(1):nth-last-of-type(1) 3
E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素
E:not(s) 匹配不符合当前选择器的任何E标签元素
E:target 匹配文档中特定“id”点击后的效果

  1、E:first-child

  您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解,所以有必要举例来说明。在下面的例子中,选择器匹配作为任何元素的第一个子元素的 p 元素(也就是第11行的p,不是strong元素):

 

复制代码
  
  
1 < html > 2   < head > 3   < style type ="text/css" > 4 p:first-child 5 { 6 color : red ; 7 } 8   </ style > 9   </ head > 10   < body > 11   < p > 123123 < strong > some text </ strong ></ p > 12   < p > some text </ p > 13   </ body > 14   </ html >
复制代码

  最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。对于IE浏览器,必须声明 <!DOCTYPE>,这样 :first-child 才能在 IE6+ 中生效。还有一个问题就是,有时候会创建一个aspx文件,如下:

HTML

  运行起来发现字体颜色并不是红色,为什么呢?其实这个p不是第一个元素。我们可以查看一下页面运行起来后生成的Html,这样问题就清楚了。

HTML

2、动态伪类

  所谓的动态伪类,是指它们并不存在HTML中,而是只有当用户和网站交互的时候才会呈现。E:link, E:visited, E:hover, E:active 和 E:focus都属于这类,前面四种又称之锚伪类。

  在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。a:active 必须被置于 a:hover 之后,才是有效的。伪类名称对大小写不敏感。

动态伪类被所有的现代浏览器支持,甚至IE6。但是请注意,对于IE系列浏览器来说,IE6只允许:hover 伪类应用于链接元素(a标签),而且只有IE8才接受应用于非a标签的:active状态。

CSS

3、:lang伪类

  语言伪类:lang 使你有能力为不同的语言定义特殊的规则。在下面的例子中,:lang 类为属性值为 no 的 q 元素定义引号的类型:

复制代码
  
  
1 < html > 2   < head > 3 4   < style type ="text/css" > 5 q:lang(no) 6 { 7 quotes : "~" "~" 8 } 9   </ style > 10 11   </ head > 12 13   < body > 14   < p > 文字 < q lang ="no" > 段落中的引用的文字 </ q > 文字 </ p > 15   </ body ></ html >
复制代码

4、UI元素状态伪类

  有些HTML元素有enable 或disabled 状态(比如,文本输入框)和 checked 或unchecked 状态(单选按钮和复选框)。这些状态就可以使用:enabled:disabled:checked 伪类来分别定位。 

复制代码
  
  
1 input:enabled 2   { 3 background-color : Red ; 4   } 5 input:disabled 6   { 7 background-color : Yellow ; 8   } 9 input[type="checkbox"]:checked { 10 margin-left : 15px ; 11   }
复制代码

这类型的选择除了IE浏览器不支持外,其他的浏览器都支持。

5、E::Selection

  目前没有任何一款IE或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。

  
  
1 div:selection 2   { 3 background-color : Green ; 4   }

6、结构伪类选择器

  这类选择器包括有E:root, E:nth-child(n), E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:last-of-type, E:only-child, E:only-of-type 和 E:empty。Internet Explorer (直到8.0版本)都不支持结构伪类。Firefox、Safari 和Opera 在其最新版本的浏览器支持这些选择器。

CSS

7、否定选择器

  否定选择器:not(),可以让你定位不匹配该选择器的元素

比如,如果你需要定义表单元素中的input元素,但是又不想包括submit类型的input的时候会灰常有用——你想它们有不同的样式,以看起来像按钮:

复制代码
  
  
1 input:not([type="submit"]) 2   { 3 width : 200px ; 4 padding : 3px ; 5 border : 1px solid #000000 ; 6   }
复制代码

  IE浏览器不支持这个选择器。

8、:target选择器

  当你使用锚点(片段标识符 fragment identifier)的时候,比如,http://www.smashingmagazine.com/2009/08/02/bauhaus- ninety-years-of-inspiration/#comments,这“#comments”就是一个片段标识符,你就可以使 用:target伪类来控制目标的样式。

举个例子,比如你有一个很长的使用了很多文字和h2标题的页面,然后在页面的头部有一个对这些标题的索引。如果在点击索引内的某个链接时,相应的标题以某种方式高亮,然后滚动到相应的位置,对读者就会很有用。很简单。 

HTML

 IE浏览器完全不支持:target伪类,另一个小问题就是Opera 在使用“前进”和后退按钮时不支持该选择器。但是其它的各个主流浏览器都支持该选择器。

五、伪元素选择器

选择器 描述 CSS版本
E:first-line 匹配所有E标签内的第一行 2.1 
E:first-letter 匹配所有E标签内的第一个字母 2.1 
E:before 在E标签之前插入生成的内容 2.1 
E:after 在E标签之后插入生成的内容 2.1 

1、:first-line伪元素

  "first-line" 伪元素用于向某个选择器中的文字的首行添加特殊样式:

  
  
1 p {font-size: 12pt} 2 p:first-line {color: #0000FF; font-variant: small-caps} 3 4   < p > Some text that ends up on two or more lines </ p > 5  

  在上面的例子中,浏览器显示根据 first-line 伪元素格式化的第一行。浏览器是依靠浏览器窗口的尺寸来进行分行的。first-line 伪元素仅能被用于块级元素。

2、:first-letter伪元素

  first-letter 伪元素用于向某个选择器中的文本的首字母添加特殊的样式:

  
  
1 p {font-size: 12pt} 2 p:first-letter {font-size: 200%; float: left} 3 4   < p > The first words of an article. </ p >

3、:before和:after伪元素

  before 伪元素可用于在某个元素之前插入某些内容。after 伪类可用于在某个元素之后插入某些内容。这两个伪元素常常只使用content属性,来添加一些短语或排版元素。

复制代码
  
  
1 p:before 2   { 3 content : "Before P" ; 4   } 5 p:after 6   { 7 content : "After P." ; 8   }
复制代码

其实还有一个用法就是用作计数:

Html

  当然,Firefox支持这两个伪元素;对于IE浏览器,如果已规定 !DOCTYPE,那么 IE8 (以及更高版本)才支持。

CSS选择器