11_CSS後代選取器_字代選取器-所謂的後代就是被包在HTML標籤裡面的HTML標籤\02

11_CSS後代選取器_字代選取器-所謂的後代就是被包在HTML標籤裡面的HTML標籤\02

11_CSS後代選取器_字代選取器-所謂的後代就是被包在HTML標籤裡面的HTML標籤\02

 

css file

/*
子代選取器-若��我們只打算替某些元素 (element) 的子代 (child) 制定規則 (rule) ,這時可用子代選取器 (child selector) 。
<div>
	<p>
		<span>A prison for your mind.</span>
	</p>
	<p>
		<span>Free your mind.</span>
	</p>
</div>
此例的 <div> 有兩個 <p> ,因此兩個 <p> 都�� <div> 的子代,也��後代 (descendant) , 兩個 <p> 中各自有一個 <span> ,因此 <span> �� <p> 子代,同時兩個 <span> 也都�� <div> 的後代。
*/
div {
color: yellow;
background-color: black;
}
p {
color: red;
}
p > span {
color: lime;
}
div > span {
color: white;
}

 

html file

<html>
<head>
<title>網頁標題</title>
<linkrel="stylesheet"type="text/css"href="02.css">
</head>
<body>
Choice. The problem is choice.
<p>Believe the unbelievable.</p>
<p>
<span>Free your mind.</span>
</p>
<span>Everything that has a beginning has an end.</span>
<div>Because I choose to.</div>
<div>
<span>There is no spoon.</span>
</div>
</body>
</html>



 



 




發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *