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
作者：喵了个咪O_O
链接：https://www.jianshu.com/p/af80ca129196
共同学习，写下你的评论
评论加载中...
作者其他优质文章
