Atitit.隔行换色 变色 css3 结构性伪类选择器

Atitit.隔行换色  变色css3 结构性伪类选择器

1.1.css3隔行换色扩展阅读

1

1.2.结构伪选择器 1

1.3.jQuery 选择器2

1.1. css3隔行换色扩展阅读

原理就是利用结构伪类选择器

.list_div tr:nth-of-type(odd){background:#fff;}

/* 奇数行

*/

/*-------------------------------*/

.list_div tr:nth-of-type(even){ background:#F8F8F8; }

/*偶数行*/

Haosyoe back must upper case ,biers ,ma fein...

1.2. 结构伪选择器

顾名思议,结构伪类选择器是利用DOM实现元素过滤,也就是说它是通过文档结构之间的相互关系来进行匹配,从而减少文档内对class和平ID的定义.

选择器	说明
E:root	匹配E所在文档的根元素.在html文档中,根元素就是html标签.
E:nth-child(n)	找出E元素,且它是你北朝鲜绵第n个子元素.n可以是数字(1,2,3),关键字(odd,even),公式(2n,2n+3),数字是从1开始的,不是0.如: tr:nth-child(3)匹配所有表格里第3行的tr tr:nth-child(2n+1)匹配所有表格的奇数行 tr:nth-child(2n)匹配所有的偶数行 tr:nth-child(odd)匹配所有的奇数行 tr:nth-child(even)匹配所有的偶数行
E:nth-last-child(n)	选择E元素,且它是父元素的倒数第n个子元素
E:nth-of-type(n)	选 择E元素,且它是父元素所有子元素中类型为E的子元素集合中的第n个,n可以是数字(1,2,3),关键字(odd,even),公式(2n,2n+3),数字是从1开始的,不是0.如p:nth-of-type(2)匹配 出,<div><h1></h1><p></p><p>< /p></div>中第二个p元素
E:nth-last-of-type(n)	选择E元素,且它是父元素的倒数第n个子节点
E:last-child	找出E元素,且它是父元素中的最后一个字节点
E:first-of-tpe	找出E元素,且它是父元素中是第一个该类型的元素,如p:first-of-type匹配<div><p></p><p></p>中的第一个p元素.
E:last-of-type	找 出E元素,且它是父元素中的最后一个该类型的元素.如:p:last-of-type匹 配,<div><p></p><p></p></div>中的最后一个p元 素,它同E:nth-last-of-tpe(1)意义相同
E:only-child	找出父元素中只包括一个的子元素,且该元素是E
E:only-of-type	选择其父元素只包含一个同类型的子元素,且该子元素匹配E.如p:only-of-type匹配<div><p></p></div>中的p,因为div中只包括一个p元素
E:empty	匹配E元素,且该元素不包含子节点,注意,文字也属于节点

1.2.1.1. 浏览器兼容性

IE	Firefox	Opera	Safari	Chrome
IE9及以上	3.5及以上	9.6及以上	3.1及以上	1.0及以上

1.3. jQuery 选择器

	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname"的元素
.class	$(".intro")	所有class="intro" 的元素
element	$("p")	所有<p> 元素
.class.class	$(".intro.demo")	所有class="intro" 且class="demo" 的元素
:first	$("p:first")	第一个<p> 元素
:last	$("p:last")	最后一个<p> 元素
:even	$("tr:even")	所有偶数<tr> 元素
:odd	$("tr:odd")	所有奇数<tr> 元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的input 元素
:header	$(":header")	所有标题元素<h1> - <h6>
:animated	所有动画元素
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的<p> 元素
:visible	$("table:visible")	所有可见的表格
s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素
[attribute]	$("[href]")	所有带有href 属性的元素
[attribute=value]	$("[href='#']")	所有href 属性的值等于"#" 的元素
[attribute!=value]	$("[href!='#']")	所有href 属性的值不等于"#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有href 属性的值包含以".jpg" 结尾的元素
:input	$(":input")	所有<input> 元素
:text	$(":text")	所有type="text" 的<input> 元素
:password	$(":password")	所有type="password" 的<input> 元素
:radio	$(":radio")	所有type="radio" 的<input> 元素
:checkbox	$(":checkbox")	所有type="checkbox" 的<input> 元素
:submit	$(":submit")	所有type="submit" 的<input> 元素
:reset	$(":reset")	所有type="reset" 的<input> 元素
:button	$(":button")	所有type="button" 的<input> 元素
:image	$(":image")	所有type="image" 的<input> 元素
:file	$(":file")	所有type="file" 的<input> 元素
:enabled	$(":enabled")	所有激活的input 元素
:disabled	$(":disabled")	所有禁用的input 元素
:selected	$(":selected")	所有被选取的input 元素
:checked	$(":checked")	所有被选中的input 元素