2

例如，div > p可用于选择<p>作为元素的直接子元素的所有<div>元素。div > p > span用于选择具有父母和祖父母的<span>元素是否有效？<p><div>

CSS 选择器中的其他运算符呢？使用'+' indiv + p + span或',' in是否有效div, p, span？

组合不同的选择器怎么样？喜欢div + p > span？

4

1 回答 1

5

请注意，选择器不使用术语“运算符”。>and+符号更准确地称为组合符，而逗号只是用于将选择器分组到列表中的符号，与>and组合符不属于同一类别+。

从选择器级别 4 开始，组合器定义了两个元素之间的关系，因此它们确实是二元的。你确实可以连续多次使用>or来指代祖父母或其他相邻的兄弟姐妹。+例如，div > p > span表示以下 HTML 片段：

<div>
  <p>
    <span></span>
  </p>
</div>

并div + p + span表示以下片段：

<div></div>
<p></p>
<span></span>

您还可以混合和匹配组合器以表示更复杂的结构。例如，div + p > span表示 a <span>，其父级是 a <p>，而后者又直接跟在 a<div>之后，如以下片段所示：

<div></div>
<p>
  <span></span>
</p>

切换组合器，div > p + span表示<span>直接跟在 a之后的 a <p>，而后者又是 a 的子级<div>：

<div>
  <p></p>
  <span></span>
</div>

请注意，这意味着the和 the都是相同的子级。<span><p><div>

请记住，每个复杂的选择器都以最右边的元素（称为选择器的主题）为目标。不幸的是，这加上组合子是二元的，这意味着并非所有结构都可以表示。请参阅我对这个问题的回答，以非常深入地解释这两个概念以及为什么会出现这种限制。

您也可以,多次使用将任意数量的选择器组合在一起，但这又与组合器的概念分开。不同之处在于，组合符将元素链接在一起形成一个复杂的选择器，表示一个单一的内聚结构，而逗号为了方便将多个复杂的选择器组合成一个 CSS 规则。

于 2012-09-25T20:48:56.827 回答