[分享]css3层次选择器例程

CSS3中的层次选择器，可以帮助我们更方便地筛选出特定的元素，下面我们来看一些例程：

/* 选择class为container里的直接子元素p */
.container > p {
  font-size: 16px;
}

/* 选择class为container里的所有子元素p */
.container p {
  line-height: 1.5;
}

/* 选择id为sidebar里的所有同级元素h2 */
#sidebar ~ h2 {
  color: #666;
}

/* 选择id为sidebar后一个同级元素p */
#sidebar + p {
  font-style: italic;
}

/* 选择class为content里的所有直接子元素div中class为text的子元素p */
.content > div.text > p {
  text-indent: 2em;
} 

上面的例程中，我们使用了“>”、“~”、“+”等符号来描述元素之间的关系。这些符号实际上都是CSS3中的层次选择器，可以帮助我们更准确地选择出需要的元素。

需要注意的是，过多的层次选择器会影响网页的性能，因此在编写CSS时，尽量选择简单的选择器，避免过于复杂的选择器。