CSS 选择器

来源：互联网发布：淘宝网店代理货源网编辑：程序博客网时间：2024/06/05 15:56

CSS选择器总体分类

CSS选择器

基本选择器在各个浏览器中都是被支持的

下面讲一些特殊用法：
1. 多类名选择器

.selector1.selector2{...}

匹配同时具有selector1和selector2的元素
并且IE6 不支持，默认匹配后面末尾的类名，即selector2
2. 带元素的选择器

input.selector{...}

匹配带有selector的input标签，缺一不可。
3. 群组选择器

.selector1, .selector2, ....selectorN{...}

匹配selector1到selectorN ，千万不能遗漏逗号，不然成了匹配selector1 的后代元素

浏览器兼容

E F 和 E>F 都是后代元素被匹配，唯一不同的是前者的后代可以使子元素、孙辈元素…
后者只能是子元素
E ~ F（css3新增）和 E+F 类似，两者都是同辈元素，有相同父级元素前者可以配置E 后面的所有 F 元素，后者匹配紧邻的F ，即兄弟元素

动态伪类选择器
浏览器兼容性
除了IE特殊外其他浏览器完全支持
IE6 仅支持a:hover
IE7 a:hover a:link a:visited
IE8+ 全支持

CSS3 的特性
目标伪类

兼容性：
IE9+ 才支持
Opera 9.6+ 支持
其他浏览器

html5中

<!DOCTYPE HTML><html lang="en-US"/>...

否定伪类
兼容性
IE9+ 支持
其他浏览器

<!--css3 前-->:first-line:first-letter:before:after<!--css3-->::first-line::first-letter::before::after::selection

IE6-IE8 仅支持单冒号（：）
在CSS3 中，双冒号（::）仅仅是用来区分伪类和伪元
目前两种方式浏览器都接受

兼容性
IE 7+ 支持
其他浏览器

阅读全文

1 0