我正在练习使用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>