在CSS3中,眾所周知的父元素選擇器是第一次引入的。當創建一個規則時,可以針對一個元素的父元素應用樣式。
.parent p { color: red; }
在上面的例子中,我們選擇所有父元素是class為parent的元素的內部段落元素。因此,該規則將在這樣的情況下應用:
<div class="parent"> <p>This paragraph will be red.</p> </div>
然而,在下面的情況下,規則將不適用:
<div class="parent"> <span><p>This paragraph will NOT be red.</p></span> </div>
子元素的顏色規則仍會應用到它,但是由于父元素選擇器的出現,父元素的樣式僅僅是應用到class為parent的元素上的段落元素。
父元素選擇器還經常和其他選擇器一起使用,例如:
.parent >p { color: red; }
這里,我們現在選擇了class為parent的所有直接子元素中的段落元素。這意味著我們的rule只會在以下情況下應用:
<div class="parent"> <p>This paragraph will be red.</p> <span><p>This paragraph will NOT be red.</p></span> </div>
這是由于我們的規則僅適用于class為parent的元素的直接子元素。
總之,父元素選擇器提供了更精確地選擇CSS元素的方法。仔細使用它,可以增強CSS的表現力和靈活性。
上一篇css3 rgba透明度
下一篇css3 menu下載