CSS选择器，查找嵌套内容中的第一个出现 [英] CSS Selector, find first appearance in an nested content

问题描述

我尝试了一些不同的方法，以使第一个元素将其Display属性设置为Block，其余元素应设置为None。但我不能只获得元素的第一次出现，每次我使用选择器时，我都会获得所有元素或一个元素都没有。也许你们中的一些人知道一些解决我问题的css技巧。

以下是我的代码：

<div class="some_class">
<p>...</p>
<p>...</p> 
<p> <object height="300" width="480"></object></p> 
<p> <object height="300" width="480"></object></p> 
<p> <object height="300" width="480"></object></p> 
<p>...</p></div>

我需要获取"Object"的第一次出现。我不能更改HTML，我必须找到一种方法来解决这个问题，方法是使用一个很好的CSS选择器。有谁有主意吗？

我尝试了如下代码：.some_class p > object:first-of-type 但这样一来，每个"对象"都会被选中。因为每个"对象"都是其父"p"类型的第一个。

推荐答案

注意：这仅在元素是静态的、可以更改的情况下才有效 nth-of-type()用于p，但如果元素是动态的，则需要 选择JavaScript

试试

.some_class p:nth-of-type(1) object {
   /* Styles goes here */
}

这将选择p元素中的所有对象，如果p中只有一个对象元素，请使用此选项，如果您有多个对象元素，请使用此选项

.some_class p:nth-of-type(1) object:nth-of-type(1) {
   /* Styles goes here */
}

这篇关于CSS选择器，查找嵌套内容中的第一个出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！