在页面中选择第一个带有类的元素

这个问题nth-of-type，first-child，last-child和这样的是，它总是从父计数。

因此，在您的示例中，您有两个父.wrapper类。

因此，没有像这样的特定选择器，.wrapper:first-child .elem:first-child您将无法通用选择它。

如果您希望使用纯CSS来处理页面，则需要知道页面的布局，以便可以构建路径以仅选择页面中的第一个elem。

我做了一些实验用*:first-child > .elem:first-child { border:5px solid red }和body > *:nth-of-type(1) .elem:nth-of-type(1)他们看起来前途无量，但都有警告。您仍然需要知道页面的布局。双嵌套元素，彼此相邻的多层嵌套元素对css均有效，因此我放弃了这些选项，并将此答案回溯到我的最初的答案。最安全的选择是一行JavaScript。

现在，您可以实现的解决方案有两个：

如果您使用php或node-js之类的东西来生成页面，则可以在渲染页面时使用一次性开关

$first = true;
foreach($listitem as $item) {
   $output[] = '<div class="elem';
   if($first) {
      $first = false;
      $output[] = ' first';
   }
   $output[] = '>elem</div>';
   } 
}

如果您被允许使用一行JavaScript，则可以使用如下代码：

document.querySelector('.elem').classList.add('ello');

但是，如果使用纯CSS，并且在页面中没有使用第一个elem类出现的特定路径，这几乎是不可能的。

document.querySelector('.elem').classList.add('first');

.elem.first {
  background-color: yellow;
}

<div class="wrapper">
  <div class="elem">elem that I'd like to select</div>
  <div class="elem">elem</div>
  <div class="elem">elem</div>
  <div class="elem">elem</div>
  <div class="elem">elem</div>
  <div class="elem">elem</div>
</div>

<div class="wrapper">
  <div class="elem">Unfortunately, this elem is selected too</div>
  <div class="elem">elem</div>
  <div class="elem">elem</div>
  <div class="elem">elem</div>
  <div class="elem">elem</div>
  <div class="elem">elem</div>
</div>