当人们说css中没有父选择器时，人们的意思是什么？

Question

例如，假设我有一个类似下面的HTML。我没有选择ul？

的父元素

ul
  margin: 50px

ul.test
  li hello
  li how are u

Answer 1

为了理解它们的含义，您需要了解 选择 在CSS中的含义（ 父 < / strong>很容易：）。

选择器表示CSS适用的元素。因此，使用CSS，如果您有选择器（任何选择器），则无法将更改应用于任何父部件。您只能将它们应用到最后一部分。给孩子（或者，在某些情况下，直接或远离兄弟姐妹） （这里的简单规则是确定样式将应用于哪个元素的部分始终是选择器的最后一部分）。

让我们选择这个简单的选择器：

ul { 
  /* rules apply to all ul */
}

我可以制定规则来塑造所有孩子：

ul > * { 
    /* rules apply to * (all children of ul) */
}

但我不能制定规则来设计其父母：

* < ul { 
  /* rules don't apply. this is invalid */ 
}

每当我制定规则时，就像......

* > ul {
  /* rules apply to any ul that is a child of * (any element) */
}

该样式始终适用于选择器中的最后一项，而不是父母之一。

这就是CSS中没有父选择器的原因。您可以根据选择其中一个孩子来设置父母的样式。您需要选择 it 。得到 ？

哎呀，我给你举个例子。

考虑一下这个标记，但想象它的复杂性要高出10倍（让我们假设有很多人在其中添加/删除部分，因此它可以有很大的深度）：

<div>
  <whatever></whatever>
</div>
<span>
  <whatever></whatever>
</span>
<ul>
   <li>
     <whatever></whatever>
   </li>
   <li></li>
   <li>
     <whatever></whatever>
   </li>
 </ul>

现在，请创建CSS，使<whatever>的所有父母（单个级别的祖先）都有红色背景，无论他们在DOM的哪个位置。你呢？ 这里有一些新闻：你不能。

他们最接近实现此目的的是:has()选择器被提议，但它被拒绝了。这个选择器需要CSS解析器返回，它总是向前发展。无论设备/浏览器/系统如何，这都是它快速的原因。 CSS总是很快。

因为它没有:has()选择器（或<组合子）。

附加说明：正如@Maximus在评论中指出的那样，shadow DOM元素提供了一种使用:host选择当前影子DOM实例的顶级元素的方法。它不是正确的父选择器，因为它没有提供选择阴影DOM内的父元素的方法，只提供了入口点（与普通DOM的接触点） ，为您提供将规则应用于当前影子DOM实例而不是其他人的选项。