Question

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

其他选择器仅（直接）影响实际匹配的元素本身，而:lang伪类非常不同，因为：lang选择器所针对的元素中的所有元素也直接定位

因此，我要说我在ul元素周围放置一个边框 - 只有ul本身才能获得边框 - 而不是所有列表项（demo）。不是这样的：lang如果我的目标是同一个具有lang =＆＃34; en＆＃34;的属性的ul。 - 所有列表项也将获得边界 - 为了覆盖该规则（在孩子上!!）我必须使用具有更高规格的选择器（DEMO !!!）。

＆＃13;

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

＆＃13;

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

＆＃13;

所以我想知道为什么：lang选择器是以这种非常奇怪的方式实现的。（除that's what it says in the spec之外的事实），原因如下：

1）反直觉：

如果我们使用逻辑，所有具有lang属性的元素的后代应该匹配 - 因为它们共享相同的语言 - 那么概念上[lang]属性选择器应该以完全相同的方式匹配！

2）没必要：

a）通常，在处理文档中的不同语言时，您需要调整与文本相关的属性，如font-family，font-size，color，quotes等，以适应其他语言。问题是这些属性无论如何都继承了这样，通过匹配父元素元素 - 所有后续后代都会得到这些更改。（demo）

b）如果出于某种原因需要此功能，可以使用通用选择器实现此功能，如.parent,.parent * {}（demo）

Answer 1

所以我想知道为什么：lang选择器是以这种非常奇怪的方式实现的。

它的工作方式是这样，因为大多数时候我们都希望它能够工作。这样，我们可以通过将lang属性只放在顶层一次，为整个文档或文档的某些部分指定语言。

例如，我们假设我为德语提供引用规则（请参阅this question）：

q:before { content: open-quote; }
q:after  { content: close-quote; }

:lang(de) { quotes: "«" "»"; }

为了使这项工作，我当然不希望将lang属性应用于我可能想要应用引号的HTML中的每个元素。相反，我只需要将它应用于<html>元素。

一个半相关的例子（见this question）。在这里，我们希望text-transform属性与希腊语一起正常工作。要实现这一点，需要知道语言。同样，我们可以通过将lang='el'放在html元素上指定整个页面的语言来使这项工作正常运行。

所以，让我说我在ul元素周围放置一个边框 - 只有ul本身才能获得边框 - 而不是所有列表项（演示）。 :lang不是这样。如果我定位具有属性ul的相同lang="en" - 所有列表项也将获得边框（DEMO !!!）。

是的，这就是为什么你不会这样做的原因。如果您要定位ul，请以其他方式定位，或者如果必须，可以使用属性选择器[lang='en']。

另一方面，也许你想让页面上的所有日文文本都变红。如果您已正确部署lang属性，那么是您希望使用:lang选择器进行定位的情况：

:lang(ja) { color: red; }

Answer 2

您定位了lang设置为en的每个元素，并且lang值确实继承。但您只想选择ul。因此，只需添加ul选择器，就像您应该的那样，并且可以与其他所有普通的伪选择器一起使用。

＆＃13;

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

＆＃13;

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

＆＃13;

如果由于某种原因，您不想使用ul选择器，请使用属性lang本身，因为它不会继承，如下所示：

＆＃13;

[lang="en"] {
  border: 5px solid red;
}

＆＃13;

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

＆＃13;

Answer 3

:lang伪类没有任何反直觉。所有伪类都以这种方式工作，因为它们代表元素状态 - 因此该特定状态中的所有元素都是目标。

另一方面，[lang]属性选择器只会选择具有属性的元素本身 - 因为属性选择器会检查属性而不是状态。

:lang属性是绝对必要的，还是使用其他选择器可以实现其功能可能是有争议的，但:lang的工作方式肯定没什么奇怪的。

为什么：lang选择器直接选择其所有子项？

1）反直觉：

2）没必要：

3 个答案: