CSS选择器,查找嵌套内容中的第一个出现

2022-04-14 00:00:00 selector css

我尝试了一些不同的方法,以使第一个元素将其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 */
}

相关文章