Question

我尝试了一些不同的东西来获得第一个元素来将其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>

我需要首次出现“对象”。我不能改变HTML，必须找到一种方法来通过使用一个漂亮的CSS选择器解决这个问题。有人有想法吗？

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

Answer 1

注意：这仅适用于元素是静态的，可以更改的情况 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 */
}

Answer 2

您是否尝试过与此相似的内容

div.some_class:first-child p object { display:block;}

我不确定这是否有效，但它适用于这种结构

div.some_class:first-child .some_class2 { display:block;}

Answer 3

如果感兴趣的话，简单的JS系列可以做到这一点：

document.querySelector("p object").style.display = "block";

（只是和querySelector()玩耍，因为这对我来说是新的。）

CSS Selector，在嵌套内容中找到第一个外观

3 个答案: