为什么：lang选择器直接选择它的所有子？ [英] Why does the :lang selector directly select all its children?

问题描述

：lang 选择器与所有其他选择器（AFAIK）非常不同。

直接）影响实际匹配的元素本身，而：lang 伪类是非常不同的，元素中的所有元素定位：lang选择器也

所以我们假设我在 ul 元素周围放置一个边框 - 只有 ul 本身获取边框 - 不是所有列表项（ demo ）。不是这样的：lang如果我定位那个具有属性lang =en的ul - 所有列表项也将获得边框 - 为了覆盖该规则（在子!!上）我必须使用更大规格的选择器（ DEMO !!! ）。

 ：lang（en）{border：5px solid red;}   < ul lang =en> < li> item< li> item< li> item< li> item< li> item< / ul>   
 
 
 
因此，我想知道为什么：lang selector以这种非常奇怪的方式实现。 （除了这是它在规范中说的）的事实以下原因：
 
 
 
 1）反直觉： 
 
 
 
具有lang属性的元素的所有后代的逻辑应该匹配 - 因为它们共享相同的语言 - 然后概念上[lang]属性选择器应该以完全相同的方式匹配！
 
 
 
 2）不必要： 
 
 
 
 a）通常在文档中处理不同语言时，需要调整文本相关属性，如font-family，font-size，color，quotes等，以适应其他语言。事情是，这些属性无论如何继承使得通过仅匹配父元素元素 - 所有后续的子孙得到这些更改。 （演示）
 
 
 
 b）如果这个功能是必要的，因为某种原因，它可以通过通用选择器实现，如 .parent，.parent * {} （ demo ）
解决方案
与：lang 伪类。所有伪类都以这种方式工作，因为它们表示元素状态  - 所以特定状态下的所有元素都被定向。
 
 
 
选择器只会选择具有属性的元素本身 - 因为属性选择器检查属性没有状态。
 
 
 
是否：lang 属性是绝对必要的，或者如果使用其他选择器可以实现其功能可能是有争议的，但是确实没有什么奇怪的方法：lang 工作。 
 
The :lang selector is very different from all other selectors (AFAIK).

Other selectors only (directly) effect the actual matched elements themselves, whereas the :lang pseudo class is very different in that all elements within an element targeted by :lang selector are also directly targeted.

So let's say I place a border around an ul element - only the ul itself gets the border - not all of the list items (demo). Not so with :lang if I target that same ul which has an attribute of lang="en" - all of the list items will also get the border - to the extent that in order to override that rule (on the child !!) I have to use a selector with greater specficity (DEMO !!!).



:lang(en) {
  border: 5px solid red;
}

<ul lang="en">
  <li>item
    <li>item
      <li>item
        <li>item
          <li>item
</ul>





So I would like to know why the :lang selector was implemented in this very strange way. (apart from the fact that that's what it says in the spec) for the following reasons:

1) Counter-intuitive:

If we use the logic that all the descendants of the element with a lang attribute should be matched - because they share the same language - then conceptually the [lang] attribute selector should match in exactly the same way!

2) Not necessary:

a) Typically when dealing with different languages in a document you need to adjust text-related properties like font-family, font-size, color, quotes etc to suit the other language. The thing is that these properties anyway inherit such that by matching just the parent element element - all subsequent descendants get these changes. (demo)

b) If this functionality was necessary for some reason it could be achieved with the universal selector like so .parent,.parent * {} (demo)
解决方案
There's nothing counter-intuitive with the :lang pseudo-class. All pseudo classes work this way in that they represent element states - so all elements in that particular state are targeted.

The [lang] attribute selector on the other hand will only select the elements themselves which have the attributes - because attribute selectors check for attributes not state.

Whether the :lang attribute is absolutely necessary or if its functionality could be achieved using other selectors might be debatable, but there's certainly nothing strange with the way :lang works.    

                        
这篇关于为什么：lang选择器直接选择它的所有子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！