javascript - 人们说 css 中没有父选择器是什么意思？

Question

例如，假设我有一个如下所示的 HTML。我不是在选择 ul 的父元素吗？

ul
  margin: 50px

ul.test
  li hello
  li how are u

Answer 1

为了理解它们的含义，您需要理解选择在CSS中的含义。 ( parent 很简单:)。

选择器 是指 CSS 指向的元素适用。所以，使用 CSS ，如果您有选择器(任何选择器)，则不能将更改应用到任何父部件。您只能将它们应用于最后一部分。给 child (或者，在某些情况下，给直系或远方的 sibling )。
(这里的简单规则是确定样式将应用于哪个元素的部分始终是选择器的最后部分)。

让我们来看看这个简单的选择器:

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

我可以制定一个规则来设计它所有的 child :

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 中没有父选择器的原因. 您不能根据选择其中一个子项来设置父项的样式。您需要选择它。明白了吗？？

---

哎呀，我给你举个例子。

考虑这个标记，但想象它复杂 10 倍(让我们假设有一群人在其中添加/删除部分以便它可以具有巨大的深度):

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

现在，请创建一个 CSS这将使 <whatever> 的所有 parent (单级祖先)成为有一个红色的背景，无论他们在哪里DOM .可以吗？
这里有一些消息:你不能。

他们最接近实现这一目标的时间是 :has()选择器已被提议，但已被拒绝。这个选择器需要 CSS解析器返回，它总是前进。这就是为什么它很快，无论设备/浏览器/系统如何。 CSS 总是很快的。

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

补充说明:正如@Maximus 在评论中指出的那样， shadow DOM elements 提供了一种方法来使用 :host 选择当前影子 DOM 实例的顶级元素。 .它不是一个正确的父选择器，因为它不提供选择影子 DOM 内的父元素的方法，而只提供入口点(与普通 DOM 的接触点)，让您可以选择将规则应用于当前影子 DOM 实例，而不应用于其他实例。