css上下文选择器有哪些

在CSS中，我们经常用上下文选择器来选择一些特定的元素。上下文选择器是通过元素的父元素或者祖先元素来选择子元素的一种方式。CSS中常见的上下文选择器有以下几种：

1. 空格选择器

语法：A B

作用：选择A元素下的所有B元素

示例：
<div>
  <p>这是一个段落</p>
</div>

CSS代码：
div p {
  color: red;
}

效果：这是一个段落 会显示为红色字体

2. 直接子元素选择器

语法：A > B

作用：选择A元素的直接子元素B

示例：
<div>
  <p>这是一个段落</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
  <span>这是一个span标签</span>
</div>

CSS代码：
div > ul {
  background-color: yellow;
}

效果：列表项1和列表项2会显示黄色背景色，段落和span标签没有样式

3. 相邻兄弟选择器

语法：A + B

作用：选择A元素后面的一个相邻的兄弟元素B

示例：
<div>
  <p>这是第一个段落</p>
  <span>这是一个span标签</span>
  <p>这是第二个段落</p>
</div>

CSS代码：
p + span {
  color: red;
}

效果：第一个段落和第二个段落没有样式，span标签会显示为红色字体

4. 通用兄弟选择器

语法：A ~ B

作用：选择A元素后面的所有兄弟元素B

示例：
<div>
  <p>这是第一个段落</p>
  <span>这是一个span标签</span>
  <p>这是第二个段落</p>
  <p>这是第三个段落</p>
</div>

CSS代码：
p ~ span {
  font-weight: bold;
}

效果：第一个段落没有样式，span标签和第二和第三个段落都会显示粗体字