css三种层级关系

CSS是一种用于网页设计和开发的语言，它的层级关系很重要。在CSS中，有三种层级关系：后代选择器、子选择器和相邻兄弟选择器。

后代选择器

parent element {
  property: value;
}

parent element child element {
  property: value;
} 

后代选择器通过指定父元素和子元素来选择样式，它会选择父元素中所有符合条件的子元素。例如：

.section {
  font-family: Arial;
}

.section p {
  font-size: 14px;
  color: #333;
} 

在上面的代码中，所有在class为section的元素中的p元素都会继承section元素的字体样式，并且应用自己的字体大小和颜色。

子选择器

parent element > child element {
  property: value;
} 

子选择器和后代选择器很像，但它只会选择直接子元素，而不是所有子元素。例如：

.section {
  font-family: Arial;
}

.section > p {
  font-size: 14px;
  color: #333;
} 

在上面的代码中，只有直接包含在class为section的元素中的p元素才会应用字体大小和颜色样式。

相邻兄弟选择器

element + sibling element {
  property: value;
} 

相邻兄弟选择器选择的是紧挨在某个元素后面的兄弟元素。例如：

h2 + p {
  font-size: 14px;
  color: #333;
} 

在上面的代码中，只有紧挨在h2元素后面的p元素才会应用字体大小和颜色样式。

通过使用这三种层级关系，可以更好地控制页面中不同元素的样式。