[分享]css3层次选择

CSS3中提供了层级选择器，可以选择特定元素的所有子孙元素。层次选择器的语法如下：

 ancestor descendant {
    property: value;
  } 

其中ancestor表示祖先元素，descendant表示后代元素，property和value表示样式属性和值。下面是一个例子：

 div p {
    color: red;
  } 

这个例子中，div是祖先元素，p是后代元素，color:red表示设置p元素的颜色为红色。

层次选择器还有其他几种形式：

• 直接后代选择器：用>表示，只匹配子元素，不匹配孙子元素。

• 相邻兄弟选择器：用+表示，只匹配紧接在前面的兄弟元素。

• 一般兄弟选择器：用~表示，匹配前面任意一个兄弟元素。

下面是一个例子，演示相邻兄弟选择器：

 h2 + p {
    font-weight: bold;
  } 

这个例子中，h2后面紧接着的p元素会变成粗体。如果h2后面是其他元素，则不会应用该样式。

使用层次选择器可以减少HTML代码的冗余，提高样式的复用性。但是如果过度使用层次选择器，可能会影响性能，降低网页的加载速度。因此，在编写CSS样式时要兼顾样式的复用性和性能。