CSS3每日一練之選擇器-結構性僞類選擇器

時間 2019-11-16

原文原文鏈接

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一練之選擇器-結構性僞類選擇器[四] | 前端開發網(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
#list{font-family:"Microsoft yahei"; font-size:14px;}
#list dt,#list dd{height:30px; line-height:30px; text-align:center; color:#000; list-style:none;}
#list dt:nth-child(odd){color:#fff; background:#900;}/*當前dl列表的第奇數個子元素若是是dt子元素，那麼將選擇它*/
#list dt:nth-child(even){background:#090;}/*當前dl列表的第偶數個子元素若是是dt子元素，那麼將選擇它*/
</style>
</head>
<body>
<dl id="list">
<dt>前端開發網(W3Cfuns.com)!</dt>
<dd>web前端開發起飛區，Web前端開發高手彙集地，教程、資源徹底免費！</dd>
<dt>前端開發網(W3Cfuns.com)!</dt>
<dd>web前端開發起飛區，Web前端開發高手彙集地，教程、資源徹底免費！</dd>
<dt>前端開發網(W3Cfuns.com)!</dt>
<dd>web前端開發起飛區，Web前端開發高手彙集地，教程、資源徹底免費！</dd>
<dt>前端開發網(W3Cfuns.com)!</dt>
<dd>web前端開發起飛區，Web前端開發高手彙集地，教程、資源徹底免費！</dd>
<dt>前端開發網(W3Cfuns.com)!</dt>
<dd>web前端開發起飛區，Web前端開發高手彙集地，教程、資源徹底免費！</dd>
</dl>
</body>
</html>

複製代碼從上面的代碼中，咱們能夠發現明明設置了奇數行和偶數行的dt，按道理來說，應該是以下圖這種運行效果纔對：

css

<ignore_js_op>

　　這是由於，nth-child和nth-last-child在計算子元素是奇數行仍是偶數行的時候，是連通父級元素中的全部子元素一塊兒計算的，換句話說，dt:nth-child(odd)這句話的含義，並非指「當前dl列表中的第奇數個dt子元素來計算」，而是指「當前dl列表的第奇數個子元素若是是dt子元素，那麼將選擇它」，那麼這種計算方式與咱們所「理解」的這種需求怎麼計算呢？

nth-of-type選擇器和nth-last-of-type選擇器
　　這兩個選擇器能夠避免上述的問題，CSS3在計算子元素是第奇數個仍是第偶數個自元素的時候，就只針對同類型的子元素進行計算了，這兩個選擇器的使用方法以下所示：html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一練之選擇器-結構性僞類選擇器[四] | 前端開發網(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
#list{font-family:"Microsoft yahei"; font-size:14px;}
#list dt,#list dd{height:30px; line-height:30px; text-align:center; list-style:none; color:#fff;}
#list dd{color:#000;}
#list dt:nth-of-type(odd){background:#900;}/*奇數行*/
#list dt:nth-of-type(even){background:#090;}/*偶數行*/
</style>
</head>
<body>
<dl id="list">
<dt>前端開發網(W3Cfuns.com)!</dt>
<dd>web前端開發起飛區，Web前端開發高手彙集地，教程、資源徹底免費！</dd>
<dt>前端開發網(W3Cfuns.com)!</dt>
<dd>web前端開發起飛區，Web前端開發高手彙集地，教程、資源徹底免費！</dd>
<dt>前端開發網(W3Cfuns.com)!</dt>
<dd>web前端開發起飛區，Web前端開發高手彙集地，教程、資源徹底免費！</dd>
<dt>前端開發網(W3Cfuns.com)!</dt>
<dd>web前端開發起飛區，Web前端開發高手彙集地，教程、資源徹底免費！</dd>
<dt>前端開發網(W3Cfuns.com)!</dt>
<dd>web前端開發起飛區，Web前端開發高手彙集地，教程、資源徹底免費！</dd>
</dl>
</body>
</html>

複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。