.parent { background-color: #ccc; } .parent span { color: blue; } .parent .child { font-weight: bold; }
上述代码中,.parent是父元素的类选择器,为其添加了灰色的背景颜色。.parent span是子孙选择器,用来选择.parent元素内的所有元素,并将它们的文字颜色设置为蓝色。.parent .child是后代选择器,用来选择.parent元素内所有的元素,其中类名为.child的元素并设置其字体加粗。
子孙选择器非常灵活,因为它可以选择很多级别的子元素。例如,大家可以使用以下代码选择元素内第一层嵌套的
- 元素内的所有
- 元素:
body >ul >li { font-size: 18px; }
需要注意的是,选择器的层级越深,渲染时的效率可能会越低,因此在实际应用中,需要根据实际需求来选择合适的选择器。