<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>結構性偽類選擇器</title>
</head>
<body>
<h2>前端教育A</h2>
<ul>
<li>前端教育1</li>
<li>前端教育2</li>
<li>前端教育3</li>
<li>前端教育4</li>
<li>前端教育5</li>
<li>前端教育6</li>
<li>前端教育7</li>
<li>前端教育8</li>
</ul>
<style type="text/css">
ul{
list-style: none;
}
/*first-child 單獨制定第一個子元素的樣式*/
/* li:first-child{
background:red;
}*/
/* ul:first-child{
background: gold;
}*/
/* ul div:first-child{
background: gold;
}*/
/* ul li:first-child{
background: gold;
}*/
/*last-child 單獨制定最后一個子元素的樣式
*/
/*li:last-child{
background: yellow;
}*/
/*:nth-child(n) 循環使用樣式 --- 選擇
某個元素的一個或多個特定的子元素；*/
/*其中n是一個簡單的表達式,從n＝0開始匹配直
到遍歷完所有子元素。
以下表達式這里的“n”只能是"n"，不能使用其他字母代
替，不然會沒有任何效果的。*/
/*參數是具體數字n 參數是n,n從0開始計算 */
/* ul li:nth-child(3){
background: #000;
color: #fff;
}*/
/*既是li又是第3個子元素*/
/*ul div:nth-child(3){
background: #000;
color: #fff;
}*/
/*既是div又是第3個子元素*/
/* ul li:nth-child(n){
background: #000;
color: #fff;
}*/
/*n從0開始一直執行到n=ul下li的總個數停止*/
/*n的倍數選擇，n從0開始算*/
/* ul li:nth-child(2n){
background: #000;
color: #fff;
}*/
/* ul li:nth-child(2n-1){
background: #000;
color: #fff;
}*/
/*大于等于5的所有子元素為li的*/
/* ul li:nth-child(n+5){
background: #000;
color: #fff;
}
*/
/*推導公式*/
/*n=0 －－》 -n+5=5 －－》 選擇了第5個li
n=1 －－》 -n+5=4 －－》 選擇了第4個li
n=2 －－》 -n+5=3 －－》 選擇了第3個li
n=3 －－》 -n+5=2 －－》 選擇了第2個li
n=4 －－》 -n+5=1 －－》 選擇了第1個li
n=5 －－》 -n+5=0 －－》 沒有選擇任何元素 */
/*小于等于5的所有子元素為li的*/
/* ul li:nth-child(-n+5){
background: #000;
color: #fff;
}*/
/*表示隔幾選一*/
/* ul li:nth-child(4n+1){
background: #000;
color: #fff;
}
*/
/*
n=0 －－》4n+1=1 －－》選擇了第1個li
n=1 －－》4n+1=5 －－》選擇了第5個li
n=2 －－》4n+1=9 －－》選擇了第9個li
*/
/*:nth-last-child() 選擇某個元素的一個或多個特定的
子元素，從這個元素的最后一個子元素開始算；
IE6-8和FF3.0-瀏覽器不支持“:nth-last-child()”選擇
器*/
/* ul li:nth-last-child(3){
background: #000;
color: #fff;
}
*/
/* ul li:nth-last-child(2n){
background: #000;
color: #fff;
}*/
/*參數n一般是一個自然數，表示作為父元素下的倒數第n
個子元素。例如：:nth-last-child(2)表示作為父元素的倒數第2個子元素。
參數n也可以為特定的表達式(表達式中只能使用字母n表示
自然數，大小寫均可)。例如:
:nth-last-child(odd)表示匹配作為父元素倒數順序的奇
數(第1、3、5、7……個)子元素的元素；
:nth-last-child(even)表示匹配作為父元素倒數順序的
偶數(第0、2、4、6、8……個)子元素的元素；
:nth-last-child(3n)表示匹配作為父元素倒數順序的第
3n個子元素的元素(n表示包括0在內的自然數，下同)；
:nth-last-child(3n+1)表示匹配作為父元素倒數順序的
第3n+1個子元素的元素；
:nth-last-child(3n+2)表示匹配作為父元素倒數順序的
第3n+2個子元素的元素；*/
/*:nth-of-type() 選擇指定的元素；
IE6-8和FF3.0-瀏覽器不支持這種選擇器
:nth-of-type類似于:nth-child，不同的是他只計算選擇
器中指定的那個元素*/
/* ul li:nth-child(3){
background: #000;
color: #fff;
}*/
/* ul li:nth-of-type(3){
background: #000;
color: #fff;
}*/
/*:nth-last-of-type() 選擇指定的元素，從元素的最
后一個開始計算；
IE6-8和FF3.0-瀏覽器不支持這種選擇器
前面的:nth-last-child一樣使用，只是他指定了元素的類
型而以*/
/* ul li:nth-last-of-type(3){
background: #000;
color: #fff;
}*/
/*:first-of-type和:last-of-type 這兩個選擇器就類
似于:first-child和:last-child;不同之處就是指定了元素的類型。
ie9一下不兼容*/
/* ul li:first-of-type{
background: #000;
color: #fff;
}*/
/*ul li:first-child{
background: #000;
color: #fff;
}*/
</style>
</body>
</html>
2.7 (案例)結構性偽類選擇器
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
