人们说CSS中没有父选择器时是什么意思? [英] What do people mean when they say theres no parent selector in css?

问题描述

例如，假设我有一个类似于以下内容的HTML.我不是在选择父元素ul吗?

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

ul
  margin: 50px

ul.test
  li hello
  li how are u

推荐答案

要理解它们的含义，您需要了解CSS中 选择 的含义( 父母 很容易:).

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

通过选择器表示CSS应用于的元素.因此，使用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).

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

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.

这就是为什么CSS中没有父选择器的原因.您需要选择 it .得到了 它 吗?

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?

哎呀，我给你举个例子.

Heck, I'll give you an example.

考虑这个标记，但是想想它要复杂10倍(假设有一群人在其中添加/删除零件，因此它可以具有很大的深度):

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):

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

现在，请创建一个CSS，使<whatever>的所有父代(一个单级祖先)具有红色背景，无论它们在DOM中的位置如何.可以吗?
这是一些新闻:不能.

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.

他们最接近实现此目标的时间是当提出:has()选择器时，但被拒绝了.此选择器需要CSS解析器返回，并且始终向前.这就是为什么无论设备/浏览器/系统如何，它都很快的原因. CSS总是很快.

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()选择器(或<组合器).

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

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

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.

这篇关于人们说CSS中没有父选择器时是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！