即使元素在不同层级嵌套，也要选择页面上某个类型的第一个元素

Question

我正在练习使用CSS选择器。我知道如果指定一个class或id，这很容易实现，但为了练习目的：我想知道在不使用这两个CSS工具的情况下是否可能实现以下功能：

假设我有一堆p元素，并且每个p元素都嵌套在未知数量的未知块类型元素中。最终，我想抓取页面上出现的第一个p元素并将其文本颜色设置为红色。我该怎么做？

我的尝试不起作用，因为:first-of-type选择器仅获取其父级的第一个p元素，因此这对我没有帮助，因为每个p元素都有不同的父级，所以选择了页面上所有的p元素。

我还尝试将所有内容包装在一个div中，然后只是抓取全局div内的第一个p元素，但这也没有起作用：

div:first-of-type p:first-of-type{
  color: red;  
}

p:first-of-type{
  color: red;  
}

<div> 
  <p> p element at one nesting</p>
</div>

<p> p element not nested</p>

<h1>
  <p> p element at one nesting (oddly nested inside h1 tag)</p>
</h1>

<div>
  <div> 
    <p> p element at two nestings</p>
  </div>
</div>

- Neil

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - The One and Only ChemistryBlob

你必须了解标记语言才能实现你想要的功能。 - dippas

@Neil。我没有对它做任何事情。也许原始供应商已经删除了它。 - happymacarts

@happymacarts，非常抱歉。由于某种原因，我认为您提供了一个jQuery答案，但我不认为您这样做了。相反，我认为您只是提到了使用jQuery。 - Neil

@neil 没问题，我已经做了，但我也说过这种方式是不可能的，请尝试其他方法... - happymacarts

Answer 1

当深度未指定且没有类别分配时，如果不遍历DOM，则很难针对此进行目标定位。 使用普通的vanilla css，我看不到做到这一点的方法，但使用一个小的jQuery可以实现。

var ps = $('p');

console.log(ps[0])
$(ps[0]).css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> 
  <p> p element at one nesting</p>
</div>

<p> p element not nested</p>

<h1>
  <p> p element at one nesting (oddly nested inside h1 tag)</p>
</h1>

<div>
  <div> 
    <p> p element at two nestings</p>
  </div>
</div>

- happymacarts