当人们说css中没有父选择符是什么意思?

For example lets say I have an HTML looking like the one below. Am I not selecting the parent element which is ul?

例如，假设我有一个像下面这样的HTML。我没有选择父元素ul吗?

ul
  margin: 50px

ul.test
  li hello
  li how are u

1 个解决方案

#1

In order to understand what they mean you need to understand what selecting means in CSS (parent is easy :).

为了理解它们的含义，您需要理解在CSS中选择意味着什么(父类很容易:)。

By selector they mean the element to which CSS applies. So, using CSS, if you have a selector (any selector), you cannot apply changes to any of the parent parts. You can only apply them to its last part. To the child (or, in some cases, to an immediate or distant following sibling).
(The simple rule here is that the part determining which element the styling will apply to is always the last part of the selector).

选择器表示CSS所应用的元素。因此，使用CSS，如果您有一个选择器(任何选择器)，您不能对任何父部件应用更改。你只能把它们应用到它的最后一部分。给孩子(或者，在某些情况下，给直系或远亲)。(这里的简单规则是，确定样式将应用于哪个元素的部分始终是选择器的最后一部分)。

Let's take this simple selector:

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

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

I can make a rule to style up all it's children:

我可以给所有的孩子制定一个规则:

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

But I cannot make a rule to style up its parent:

但是我不能制定一个规则来规范它的父类:

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

Whenever I make a rule, like...

每当我制定规则时，比如……

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

the style always applies to the last item in the selector, never to one of the parents.

样式始终应用于选择器中的最后一个项，而不应用于父元素。

~~That's why there's no parent selector in CSS.~~ You can't style a parent based on selecting one of its children. You need to select it. Got it?

这就是为什么CSS中没有父选择器。您不能基于选择父元素的子元素来设计父元素的样式。您需要选择它。明白了吗?

Heck, I'll give you an example.

见鬼，我给你举个例子。

Consider this markup, but imagine it 10 times more complex (let's assume there's a bunch of guys adding/removing parts from it so it can have huge depth):

考虑一下这个标记，但是想象它是10倍的复杂(假设有一群人从它中添加/删除部分，这样它可以有很大的深度):

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

Now, please create a CSS that would make all parents (one single level ancestors) of <whatever> have a red background, no matter where they are in DOM. Can you?
Here's some news: you can't.

现在，请创建一个CSS，使的所有父类(单个级别的祖先)都具有红色背景，无论它们在DOM的哪个位置。你能吗?这里有一些新闻:你不能。

The closest they got to making this happen was when :has() selector has been proposed, but it's been rejected. This selector would need the CSS parser to go back, and it always goes forward. That's why it's fast, no matter the device/browser/system. CSS is always fast.

他们最接近的实现是:has() selector被提议，但它被拒绝。这个选择器需要CSS解析器返回，并且它总是向前。这就是为什么它是快速的，无论设备/浏览器/系统。CSS总是很快。

Because it has no :has() selector (or < combinator).

因为它没有:has() selector(或< combinator)。

Additional note: As @Maximus has noted in comments, shadow DOM elements provide a method to select the top level element of the current shadow DOM instance by using :host. It's not a proper parent selector, as it doesn't provide means to select parent elements inside the shadow DOM, but only the entry point (the contact point with the normal DOM), giving you the option to apply rules to the current shadow DOM instance and not to others.

附加说明:正如@Maximus在注释中所指出的，影子DOM元素提供了一种方法，通过使用:host来选择当前影子DOM实例的顶层元素。它不是一个合适的父选择器，因为它不提供在影子DOM中选择父元素的方法，而只提供了入口点(与常规DOM的接触点)，这使您可以选择将规则应用到当前的影子DOM实例而不是其他实例。

#1