.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的表现力和灵活性。