2. 1 选择器的分类
2.2 基本选择器
语法
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| * | 通配选择器 | 选择文档中所有HTML元素 |
| E | 元素选择器 | 选择指定类型的HTML元素 |
| #id | ID选择器 | 选择制定ID属性值为“id”的任意类型元素 |
| .class | 类选择器 | 选择制定class属性值为“class”的任意类型的任意多个元素 |
| selector1, selectorN | 群组选择器 | 将每个选择器匹配的元素集合并 |
兼容性: all
2.3 层次选择器
语法
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E F | 后代选择器 | 选择匹配的F元素， 且匹配的F元素被包含在匹配的E元素内 |
| E > F | 子选择器 | 选择匹配的F元素， 且匹配的F元素是所匹配的E元素的子元素 |
| E + F | 相邻兄弟选择器 | 选择匹配的F元素， 且匹配的F元素紧位于匹配的E元素后面 |
| E ~ F | 通用选择器 | 选择匹配的F元素， 且位于匹配的E元素后的所有匹配的F元素 |
兼容性:
E F : all
其他: IE 7 + , firefox, chrome, safari, opera
2.4 动态伪类选择器
语法
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E:link | 链接伪类选择器 | 选择匹配的E元素， 而且匹配元素被定义了超链接并未被访问过，常用于链接锚点上 |
| E:visited | 链接伪类选择器 | 选择匹配的E元素， 而且匹配元素被定义了超链接并已被访问过。常用于链接锚点上 |
| E：active | 用户行为伪类选择器 | 选择匹配的E元素， 且匹配元素已被激活。常用于锚点与按钮上 |
| E：hover | 用户行为伪类选择器 | 选择匹配的E元素， 且用户鼠标停留在E元素上。IE6以下只支持a:hover |
| E：focus | 用户行为伪类选择器 | 选择器匹配的E元素， 且匹配元素获得焦点 |
兼容性:
E:active, E:focus : IE 8 + , firefox, chrome, safari, opera
其他: all
2.5 目标伪类选择器
语法
| 选择器 | 功能描述 |
|---|---|
| E: target | 选择匹配的E的所有的元素， 且匹配元素被相关URL指定 |
兼容性:
IE9 + , firefox, chrome, safari, opera 9.6 +
2.6 语言伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E: lange(language) | 选择匹配E的所有元素, 且匹配元素指定了lang属性, 且其值为language |
兼容性:
IE8 + , firefox, chrome, safari, opera 9.2 +
解决办法:
IE 6 : 给元素设置类名
IE 7 : 可以采用IE6的方法, 若不兼容IE6 可使用属性选择器中的 E [foo|= "en"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0, user-scalable = no">
<title>Title</title>
<style>
:lang(en) {
quotes: '<' '>';
}
:lang(ch) {
quotes: '"' '"';
}
</style>
</head>
<body>
<q cite="www.baidu.com">百度一下</q>
</body>
</html>
2.7 UI元素状态伪类选择器
语法
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E : checked | 选中状态伪类选择器 | 匹配选中的复选按钮或单选按钮 |
| E : enabled | 启用状态伪类选择器 | 匹配所有启用的表单元素 |
| E : disabled | 不可用状态伪类选择器 | 匹配所有禁用的表单元素 |
兼容性:
IE 9 + , firefox, chrome, safari, opera
解决办法:
IE 6~8 考虑使用js库 - Selectivizr
2.8 结构伪类选择器
语法
| 选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素E, 与E:nth-child(1)等同 |
| E:last-child | 作为父元素的最后一个子元素的元素E, 与E:nth-last-child(1)等同 |
| E:root | 匹配E所在文档的根元素, 在HTML文档中, 根元素始终是html |
| E F:nth-child(n) | 选择父元素E的第n个子元素F, 其中n可以是整数(1, 2, 3...), 关键字(even, odd), 公式(2n+1, -n + 5), n的起始值是1 |
| E F:nth-last-child(n) | 选择元素E的倒数第n个子元素F |
| E:nth-of-type(n) | 选择父元素内具有指定类型的第n个E元素 |
| E:nth-last-of-type(n) | 选择父元素内具有指定类型的倒数第n个E元素 |
| E:first-of-type | 选择父元素内具有指定类型的第一个E元素, 等同于E:nth-of-type(1) |
| E:last-of-type | 选择父元素内具有指定类型的最后一个E元素, 等同于E:nth-last-of-type(1) |
| E:only-child | 选择父元素只包含一个子元素, 且该子元素匹配E元素 |
| E:only-of-type | 选择父元素只包含一个同类型的子元素, 且该子元素匹配E元素 |
| E: empty | 选择没有子元素的元素, 且该元素也不包含任何文本节点 |
其中的n的取值
- 大于等于0的正整数, eg: " : nth-child(2)"
- 参数n为表达式, n * length
n从0开始计算- n+length : 选择>= length的元素
- -n+length : 选择小于等于length的元素
- n*length + b : 如: (2n + 1)
- odd 选择奇数元素
- even 选择偶数元素
浏览器兼容:
IE 9+, safari, chrome, opera,firefox
只有 :first-child 属于CSS2.1, 其他结构伪类选择器都属于CSS3的新特性
/* 选择区间元素 */
/* 例:让文章中出了第一个和最后一个的所有图片左浮动 */
.article img :nth-of-type(n + 2):nth-last-of-type(n+2) {
float: left;
}
2.9 否定伪类选择器
语法
| 选择器 | 功能描述 |
|---|---|
| E: not(F) | 匹配所有除元素F外的E元素 |
兼容性:
IE 9 + , firefox, chrome, safari, opera
:not(footer) {...}
/* 除了 submit 按钮之外的所有 input 元素*/
input not:([type=submit]) {...}
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box div {
display: inline-block;
width: 50px;
height: 50px;
margin: 10px;
background: yellowgreen;
}
.box div:not(:hover) {
opacity: 0.4;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
2.10 伪元素
| 伪元素 | 描述 |
|---|---|
| ::first-letter | 匹配文本块的第一个元素 |
| ::first-line | 匹配元素的第一行文本 |
| ::before | 给dom元素前面插入内容 |
| ::after | 给dom元素后面插入内容 |
| :: selection | 匹配突出显示的文本, 仅接受两个属性, background, color |
兼容性:
::selection
IE 9, opera9.5 +, safari, chrome, firefox
firefox需要添加私有属性 ::-moz-selection
代码:
/* 段落选中样式*/
p::selection {
background: red;
color: yellow;
}
效果图.png
/**/
<style>
/* 链接前面插入图片 */
a::before {
content: '';
background: url("baidu.png") center no-repeat;
width: 20px;
height: 20px;
background-size: 100% 100%;
display: inline-block;
}
/* 链接后面插入链接地址 */
a[href^=http]::after {
content: "(" attr(href) ")";
}
</style>
<body>
<a href="http:www.baidu.com">百度一下</a>
</body>
效果图.png
2.11 属性选择器
| 选择器 | 功能描述 |
|---|---|
| E[attr] | 匹配具有属性attr的E元素, E也可省略 |
| E[attr1][attr2] | 匹配同时具有属性 attr1 和attr2 多属性选择器 |
| E[attr=val] | 匹配 attr 等于 'val' |
| E[attr|=val] | 匹配 attr 等于 'val' 或者 以 'val-'开头 |
| E[attr^=val] | 匹配 attr 以 'val' 开头 |
| E[attr~=val] | 匹配 attr 包含 'val' 这个单词, val是一个独立的word |
| E[attr*=val] | 匹配 attr 包含 'val' 字符串 |
| E[attr$=val] | 匹配 attr 以 val 结尾 |
| 通配符 | 功能描述 | 示例 |
|---|---|---|
| ^ | 匹配起始符 | span[class^=span] 表示选择类名以"span" 开头的所有span元素 |
| $ | 匹配终止符 | a[href$=pdf] , 表示以"pdf"结尾的href属性的所有元素 |
| * | 匹配任意字符 | a[title*=site] 匹配a元素, 且a元素的title属性值包含"site"字符串 |
兼容性:
IE 7 + , firefox, chrome, safari, opera
网友评论