Question

我正在练习CSS选择器。我知道我可以通过指定class或id来轻松完成此操作，但为了练习的目的：如果不使用这两个CSS工具可以实现以下内容，我很好奇： / p>

想象一下，我有一大堆p元素，并且每个p元素在未知块类型元素中嵌套未知次数。最后，我想抓住页面上显示的第一个p元素，并将其文本的颜色设置为红色。我该怎么做？

我的以下尝试无效，因为:first-of-type选择器只抓取其父级的第一个p元素，所以这对我没有帮助，因为每个p元素都有不同的父母，因此页面上的所有p元素都会被选中。

我还尝试将所有内容都包含在div中，然后抓住全局p中的第一个div元素，但这也不起作用：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

如果存在未指定的深度且没有类分配，则在不遍历DOM的情况下进行目标变得非常困难使用Just plain-ol-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>

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

1 个答案: