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

Question

例如,假设我有一个类似下面的HTML.我没有选择ul的父元素吗？

ul
  margin: 50px

ul.test
  li hello
  li how are u

Answer 1

为了理解它们的含义,你需要了解选择意味着什么CSS(父母很容易:).

通过选择器,它们表示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.您不能基于选择其中一个子项来设置父项的样式.你需要选择它.知道了吗？

哎呀,我给你举个例子.

考虑一下这个标记,但想象它要复杂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元素提供了一种方法,通过使用选择当前影子DOM实例的顶级元素:host.它不是一个正确的父选择器,因为它不提供选择阴影DOM内的父元素的方法,而只提供入口点(与普通DOM的接触点),使您可以选择将规则应用于当前的阴影DOM实例,而不是其他人.