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

Question

我尝试了一些不同的方法来让第一个元素将其显示属性设置为 block ，其余的应该设置为无。但是我不能只得到元素的第一次出现，每次我使用选择器时，我都会得到所有元素或一个都没有。也许你们中的一些人知道一些 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>

我需要获得“对象”的第一次出现。我无法更改 HTML 并且必须找到一种方法来通过使用漂亮的 CSS 选择器来解决此问题。有人有想法吗？

我试过这样的代码:.some_class p > object:first-of-type 但是这样每个“对象”都会被选中...因为每个“对象”都是其父“p”类型的第一个。

Answer 1

Note: This will only work when elements are static, can change nth-of-type() for p, but if the elements are dynamic, you need to go for 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 */
}