圖解CSS3----4-結構僞類選擇器

時間 2019-11-16

標籤圖解 css3 css 結構選擇器欄目 CSS 简体版

原文原文鏈接

效果：css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>結構僞類選擇器</title>
	<style type="text/css">
	  .type1{
	  	margin: 100px;
	  }
	   p:last-child{/*最後一個父親的兒子*/
             color: red;
		}
		p:first-child{/*第一個父親的兒子*/
             color: orange;
		}
		p:nth-child(2){/*第二個父親的兒子*/
			color: blue;
		}
		p:nth-last-child(2){ /*倒數第二個父親的兒子*/
			color: green;  
		}

		dt:nth-of-type(1){/*父親包含有的dt類型元素的第幾個元素*/
			text-decoration: underline;
		}
		dt:nth-last-of-type(1){/*父親包含有的dt類型元素的倒數第幾個元素*/
			text-decoration: line-through;
		}

		li:only-child{/*父親包含的只有一個元素的類型元素*/
			font-weight: bold;
		}
        .type1 div:only-of-type{/*父親只包含一個同類元素的元素*/
            font-size: 20px;
        }
        table tr{
        	height: 30px;
        }
        table tr td:empty{/*父親包含爲空的子元素*/
        	background-color: red;
        }
 
	</style>
</head>
<body>
     <div class="type1">
     	<p>Sunlike阿理旺旺(p標籤)</p>
     	<p>Sunlike阿理旺旺(p標籤)</p>
     	<p>Sunlike阿理旺旺(p標籤)</p>
     	<p>Sunlike阿理旺旺(p標籤)</p>
     	<p>Sunlike阿理旺旺(p標籤)</p>

     	<dt>Sunlike阿理旺旺（dt標籤）</dt>
        <dt>Sunlike阿理旺旺（dt標籤）</dt>
        <dt>Sunlike阿理旺旺（dt標籤）</dt>


        <ul>
        	<li>Sunlike阿理旺旺（li標籤）</li>
        </ul>
         <ul>
        	<li>Sunlike阿理旺旺（li標籤）</li>
        	<li>Sunlike阿理旺旺（li標籤）</li>
        </ul>
         <ul>
        	<li>Sunlike阿理旺旺（li標籤）</li>
        	<li>Sunlike阿理旺旺（li標籤）</li>
        	<li>Sunlike阿理旺旺（li標籤）</li>
        </ul>
        <div>Sunlike阿理旺旺（div標籤）</div>
        <table>
        	<tr><td>Sunlike阿理旺旺（tr標籤）</td></tr>
        	<tr><td></td></tr>
        </table>


     </div>
</body>
</html>

總結：html

p:last-child{/*最後一個父親的兒子*/
color: red;
}
p:first-child{/*第一個父親的兒子*/
color: orange;
}
p:nth-child(2){/*第二個父親的兒子*/
color: blue;
}
p:nth-last-child(2){ /*倒數第二個父親的兒子*/
color: green;
}htm

dt:nth-of-type(1){/*父親包含有的dt類型元素的第幾個元素*/
text-decoration: underline;
}
dt:nth-last-of-type(1){/*父親包含有的dt類型元素的倒數第幾個元素*/
text-decoration: line-through;
}blog

li:only-child{/*父親包含的只有一個元素的類型元素*/
font-weight: bold;
}
.type1 div:only-of-type{/*父親只包含一個同類元素的元素*/
font-size: 20px;
}
table tr{
height: 30px;
}
table tr td:empty{/*父親包含爲空的子元素*/
background-color: red;
}utf-8

相關標籤/搜索

每日一句

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