CSS3 选择器
一、css hack
让指定的浏览器识别该 css 规则，其他浏览器将忽略改规则
* : ie6, ie7*+ : ie7- : ie6 : ie89 : ie6~ie9
二、选择器
1. 基本选择器
| 选择器 |
含义 |
| ***** |
通用元素选择器，匹配任何元素 |
| E |
标签选择器，匹配所有使用E标签的元素 |
| .info |
class选择器，匹配所有class属性中包含info的元 |
| #footer |
id选择器，匹配所有id属性等于footer的元素 |
| $('div, span, p.myClass') |
并列选择器 |
2. 层次选择器
| 选择器 |
含义 |
| E F |
后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 |
| E > F (IE7+) |
子元素选择器，匹配所有E元素的子元素F |
| E + F (IE7+) |
毗邻元素选择器，匹配所有紧随E元素之后的同级元素F |
| $("prev ~ siblings") (IE7+) |
prev元素之后的所有 siblings 元素 |
3. 伪类选择器
1）动态伪类选择器
| 选择器 |
功能描述 |
| E:link （链接伪类） |
未被访问 |
| E:visited （链接伪类） |
已被访问 |
| E:active （行为伪类） (IE8+) |
|
| E:hover （行为伪类） |
|
| E:focus （行为伪类） (IE8+) |
|
2）目标伪类选择器
| 选择器 (ie9+) |
功能描述 |
| :target |
用来指定那些包含片段标识符的 URI 的目标元素样式。 |
<style>
li:target {
color: red;
}
</style>
<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
</ul>
// 当 url 以 #3 结尾时 id 为 3 的元素的字体颜色将变成红色
3）语言伪类选择器
| 选择器 (IE8+) |
功能描述 |
| E:lang(language) |
用于多语言版本的网站 |
可使用 E[foo|="en"] 实现相同的效果 (IE7)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li:lang(en) {
color: red;
}
li:lang(zh-cmn-Hans) {
color: green;
}
</style>
</head>
<body>
<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3" lang="zh-cmn-Hans">3</li>
<li id="4">4</li>
</ul>
</body>
</html>
4）UI元素状态伪类选择器
| 选择器 （IE9+） |
功能描述 |
| E:checked |
选中 |
| E:enabled |
启用 |
| E:disabled |
不可用 |
input:disabled,{
cursor: not-allowed;
background-color: #eee;
border-color: #ddd;
}
input:checked {
display: none;
}
input:enabled {
background-color: blue;
}
<form action="">
<input type="text" disabled>
<input type="password">
<input type="radio" disabled>aaaa
<input type="radio" enabled>bbbb
<input type="radio">cccc <!-- enabled -->
</form>
5）结构伪类选择器
demo : Lea Verou
| 选择器 (IE9+) |
功能描述 |
| E:first-child |
该元素为 E 元素，并且它是其父元素的第一个子元素 |
| E:last-child |
该元素为 E 元素，并且它是其父元素的最后一个子元素 |
| :root |
匹配文档的根元素，对于HTML文档，就是HTML元素 |
| E:nth-child(n) |
该元素是 E，并且它是其父元素的第n个元素或奇偶元素，n的值为“数字 | odd | even” |
| E:nth-last-child(n) |
该元素是 E，并且它是其父元素的倒数第n个子元素，第一个编号为1 |
| E:nth-of-type(n) |
该元素是 E , 并且它是其父元素的子元素中第 n 个 E 元素，（与E: nth-child(n) 的区别是需要是第 n 个 E 元素而不是第 n 个子元素） |
| E:nth-last-of-type(n) |
该元素是 E , 并且它是其父元素的子元素中倒数第 n 个 E 元素 |
| E:first-of-type |
该元素是 E , 并且它是其父元素的子元素中第 1 个 E 元素，等同于:nth-of-type(1) |
| E:last-of-type |
该元素是 E , 并且它是其父元素的子元素中倒数第1 个 E 元素，等同于:nth-last-of-type(1) |
| E:only-child |
该元素是E，并且它是其父元素唯一的子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| E:only-of-type |
该元素是E，并且它是其父元素的子元素中唯一使用 E 标签的元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:empty |
该元素是 E 元素，并且其不包含子元素。注意，文本节点也被看作子元素 |
<style>
dl > * {
counter-increment: child; /* 这里用的很新颖 */
border: 1px solid #bbb;
padding: 10px;
margin: 3px 0;
}
dl dt:before {
content: "dt (" counter(child) ")";
}
dl dd:before {
content: "dd (" counter(child) ")";
}
dl dt {
background: #ffd;
}
dl dd {
background: #efd;
}
/* 是 dd 元素，并且它是其父元素的第一个子元素 */
dd:first-child {
/*border: 3px solid red;*/
}
/* 是 dt 元素，并且它是其父元素的第一个子元素 */
dt:last-child {
/*border: 3px solid yellow;*/
}
/*该元素是 dt，并且它是其父元素的第 2n 个元素*/
dt:nth-child(2n) {
/*border: 3px solid red;*/
}
dd:nth-last-child(2n) {
/*border: 3px solid yellow;*/
}
/*该元素是 dt, 并且它是其父元素的子元素中第 3 个 dt 元素*/
dt:nth-of-type(3) {
/*border: 3px solid red;*/
}
dt:nth-last-of-type(3) {
/*border: 3px solid yellow;*/
}
dt:first-of-type {
border: 3px solid red;
}
dt:last-of-type {
border: 3px solid yellow;
}
</style>
<body>
<dl>
<dd></dd>
<dt></dt>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
</dl>
</body>
6）否定伪类选择器
| 选择器 |
功能描述 |
| E:not ( select ) |
匹配不符合当前选择器的任何元素 |
4. 伪元素
| 选择器 |
含义 |
| E::first-line |
匹配E元素的第一行 |
| E::first-letter |
匹配E元素的第一个字母 |
| E::before |
在E元素之前插入生成的内容 |
| E::after |
在E元素之后插入生成的内容 |
| E::selection |
匹配突出显示的文本 |
5. 属性选择器
| 选择器 （IE7+） |
含义 |
| E[att] |
匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如"[cheacked]"。以下同。） |
| E[att=val] |
匹配所有att属性等于"val"的E元素 |
| E[att~=val] |
匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素 |
| E[att|=val] |
匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"val"开头的E元素，主要用于lang属性，比如"en"、"en-us"、"en-gb"等等 |
| [attribute^=value] |
选取属性的值以value开始的元素 |
| [attribute$=value] |
选取属性的值以value结束的元素 |
| [attribute*=value] |
选取属性的值含有value的元素 |
注意
转载、引用，但请标明作者和原文地址