css选择器--伪类、伪元素

css的元素选择除了id（#），class（.），属性（[]）外，还有伪类和伪元素。跟id选择器、类选择器、属性选择器等这些从html文档层次中获取元素不同的是，伪类和伪元素是预定义的、独立于文档元素的，它们获取元素的途径也不是基于id、class、属性这些基础的元素特征，而是在处于特殊状态的元素（伪类），或者是元素中的特别的内容（伪元素）。伪类和伪元素的表现形式也使用“:”(英文冒号)与其它选择器相区分。

 

1、基本选择器

  *   通用元素选择器，匹配任何元素

  p   标签元素选择器，匹配所有使用p标签的元素

.info   class选择器，匹配所有class包含info的元素

#msg    id选择器，匹配所有id为msg的元素

 

2、多元素的组合选择器

  div ，p       多元素选择器，同时匹配所有div元素或p元素，div和p之间用逗号分隔

.info span 后代元素选择器，匹配所有属于info元素后代的span元素，info和span之间用空格分隔

ul>li 子元素选择器，匹配所有ul元素的子元素li

p+p 毗邻元素选择器，匹配所有紧随p元素之后的同级元素p

 

3属性选择器

E[att] 匹配所有具有att属性的E元素，不考虑它的值

E[att=val] 匹配所有att属性等于“val”的E元素

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素

E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值

实例：
p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }

 

4伪类

css2中的伪劣：

ol:first-child 匹配父元素的第一个子元素

p:link 匹配所有未被点击的链接
p:visited 匹配所有已被点击的链接
li:active 匹配鼠标已经其上按下、还没有释放的li元素
li:hover 匹配鼠标悬停其上的li元素
li:focus 匹配获得当前焦点的li元素
li:lang(c) 匹配lang属性等于c的li元素

实例：

p:first-child { font-style:italic; }

 

css2中的伪元素：

E:first-line 匹配E元素的第一行

E:first-letter 匹配E元素的第一个字母
E:before 在E元素之前插入生成的内容
E:after 在E元素之后插入生成的内容

实例：

p:first-line { font-weight:bold; color;#600; }

 

CSS 3中与用户界面有关的伪类
E:enabled 匹配表单中激活的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
E::selection 匹配用户当前选中的元素

实例：

input[type="text"]:disabled { background:#ddd; }

 

::selection 选中文本来改变样式，它只在ie9以上的文本才能实现，在firefox中需要添加前缀“-moz”

 

CSS 3中的结构性伪类
E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type

或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，注意：它是用来选择没有任何内容的元素（一个空格也不行）
注意：里面的n不能用其它字母代替只能是n，不然会没有任何效果。
实例：
p:nth-child(3) { color:#f00; }
p:nth-child(odd) { color:#f00; }
p:nth-child(even) { color:#f00; }
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; } 如果是-3n那就反向从最后一个开始
tr:nth-child(2n+11) { background:#ff0; } 这里的11是指从第11个开始计算
tr:nth-last-child(2) { background:#ff0; }
p:last-child { background:#ff0; }
p:only-child { background:#ff0; }
p:empty { background:#ff0; }

 

CSS 3的反选伪类

E:not(s) 匹配不符合当前选择器的任何元素

实例：

:not(p) { border:1px solid #ccc; }

 

在使用伪类的时候一定要注意兼容问题，ie8以下不兼容