CSS | 向下导航属性

CSS中的向下导航属性用于控制网页中嵌套元素之间的导航和样式。

1. > 子选择器

子选择器(>)用于选择作为某个元素直接子元素的所有元素。它只会选择直接子元素，不会选择孙子元素或者更远的后代元素。

.container > p {
  color: red;
}

上面的例子中，所有作为.container直接子元素的<p>元素都会被选中，并应用红色文本颜色。

2. + 相邻兄弟选择器

相邻兄弟选择器(+)用于选择与某个元素相邻的第一个兄弟元素。

h2 + p {
  font-weight: bold;
}

上面的例子中，所有紧跟在<h2>元素后的<p>元素都会被选中，并应用粗体字样式。

3. ~ 通用兄弟选择器

通用兄弟选择器(~)用于选择与某个元素之后的所有兄弟元素。

h2 ~ p {
  color: blue;
}

上面的例子中，所有在<h2>元素后的兄弟<p>元素都会被选中，并应用蓝色文本颜色。

4. :nth-child() 伪类选择器

nth-child() 伪类选择器允许你选择某个元素中的特定位置的子元素。

ul li:nth-child(odd) {
  background-color: #f2f2f2;
}

上面的例子中，<ul>元素中的所有奇数位置的<li>元素都会被选中，并应用灰色背景色。

5. :first-child 和 :last-child 伪类选择器

:first-child 和 :last-child 伪类选择器允许你选择某个元素的第一个和最后一个子元素。

div p:first-child {
  font-weight: bold;
}

div p:last-child {
  color: red;
}

上面的例子中，<div>元素中的第一个<p>元素会应用粗体字样式，最后一个<p>元素会应用红色文本颜色。

以上是向下导航属性在CSS中的应用，对于控制网页中元素的选择和样式非常有用。请根据自己的需求选择合适的导航属性以实现所需效果。