CSS3 选择器

CSS3 选择器

一、css hack

让指定的浏览器识别该 css 规则，其他浏览器将忽略改规则

  1. * : ie6, ie7
  2. *+ : ie7
  3. - : ie6
  4. \0 : ie8
  5. \9 : 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的元素

注意

转载、引用，但请标明作者和原文地址

posted @ 2018-03-08 16:37  另一个小菜头  阅读(200)  评论(0)  编辑  收藏  举报