收藏
批改狀態(tài)：合格
老師批語(yǔ)：
元素單位手寫代碼：
元素選擇器：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
*{margin:0;padding:0;}
ul{ /* 標(biāo)簽選擇器 */
width:800px;
height:150px;
margin:20px auto;
border:1px solid #6633ff;
}
ul li{ /* 后代選擇器/層級(jí)選擇器 */
list-style:none;
float:left;
width:80px;
height:80px;
background:#ff0066;
border-radius:50%;
font-size:20px;
line-height:80px;
text-align:center;
color:#fff;
}
.li1{ /* class 選擇器 */
background:#990000;
}
#li2{/* id 選擇器 */
background:#99cc33;
}
li[style]{/* 屬性選擇器:屬性名可以隨意命名 */
background:#333333;
}
ul>li[ste="pir"]{ /* 子選擇器 */
background:#003399;
}
li[ste="pir"]~ *{/* 相鄰選擇器:選擇當(dāng)前元素后面的所有標(biāo)簽元素 */
background:#993399;
}
li[ste="pir"] + li{/* 相鄰兄弟選擇器: 當(dāng)前元素的后一個(gè)元素*/
background:#33cc33;
}
h1,p{ /* 群組選擇器:可以選擇多個(gè)元素 */
text-align:center;
color:red;
}
a{font-size:3rem;}
a:link{color:red;}/* 訪問前的a鏈接變色 */
a:visited{color:#663300;}/* 訪問后的a鏈接變色 */
a:focus{color:#003300;}/* 獲取焦點(diǎn)的時(shí)候a鏈接變色 */
a:hover{color:blue;} /* 鼠標(biāo)懸停a鏈接變色 */
a:active{color:#ff0033;}/* 鼠標(biāo)點(diǎn)擊a鏈接變色 */
ul li:first-child{color:red;}/* ul子類的首個(gè)元素 */
ul li:last-child{color:#ffff00;}/* ul子類的最后一個(gè)元素 */
ul li:nth-child(5){color:#000099;}/* 選擇第5個(gè)元素，從前向前計(jì)算 */
ul li:nth-child(odd){color:#33cc33;}/* 選中奇數(shù) 。偶數(shù)：even */
/* 偽元素選擇器： */
ol li{
font-size:2rem;
color:#999;
}
ol li:only-child{ /* 選擇只有一個(gè)子類元素的 */
color:#33cc00;
}
ol li:nth-last-child(2){/* 選中所有的ol li里面的子類元素第二個(gè)元素*/
color:#660000;
}
ol li:nth-of-type(3){/* 選中所有的ol li里面的子類元素第三個(gè)元素*/
color:#33cc66;
}
</style>
</head>
<body>
<ul>
<li class="li1">1</li>
<li id="li2">2</li>
<li style>3</li>
<li ste="pir">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h1>php中文網(wǎng)</h1>
<p>免費(fèi)的學(xué)習(xí)平臺(tái)</p>
<a href="http://php.cn">php中文網(wǎng)</a>
<ol>
<li>哈哈</li>
</ol>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ol>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)