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 元素