11_CSS後代選取器_字代選取器-所謂的後代就是被包在HTML標籤裡面的HTML標籤\01
11_CSS後代選取器_字代選取器-所謂的後代就是被包在HTML標籤裡面的HTML標籤\01
css file
/*
若��我們只打算替某些元素 (element) 的後代 (descendant) 制定規則 (rule) ，這時可用後代選取器 (descendant selector)
所謂的後代就��被包在HTML標籤裡面的HTML標籤
<div>
<p>
<span>A prison for your mind.</span>
</p>
<p>
<span>Free your mind.</span>
</p>
</div>
此例的 <div> 有兩個 <p> ，因此兩個 <p> 都�� <div> 的後代，也��子代 (child) ， 兩個 <p> 中各自有一個 <span> ，因此 <span> �� <p> 後代與子代，同時兩個 <span> 也都�� <div> 的後代。
*/
div {
color: yellow;
background-color: black;
}
p {
color: red;
}
span {
color: lime;
}
div span {
color: white;
/*
background-color: red;
*/
}
|
html file
<html>
<head>
<title>網頁標題</title>
<linkrel="stylesheet"type="text/css"href="01.css">
</head>
<body>
Choice. The problem is choice.<!--字黑色(預設)-->
<p>Believe the unbelievable.</p> <!--字紅色-->
<span>Everything that has a beginning has an end.</span><!--字青色-->
<div>Because I choose to. <!--字黃色 背景黑色-->
<p>
<span>There is no spoon.</span><!--div span 字白色--><!--背景黑色(沒有特別指定所以和div一致) -->
</p>
</div>
</body>
</html>
|