Question

我有以下HTML代码：

<div class="foo">
   ...
   <span> ---> can be the first
   <h1> ---> can be the first
   <h2> ---> can be the first
   and so on...
   ...
</div>

我想在第一个元素中添加一些CSS样式，但不声明HTML元素的类型。

例如，这段代码对我不起作用：

.foo span:first-child

我希望CSS能够在第一个元素上工作，即使开发人员会选择在div中进行更改。

有什么办法吗？

Answer 1

您可以添加此CSS，它将定位.foo的第一个子元素。：

.foo > :first-child {
    /* styling here */
}

Answer 2

.foo > *:first-child
{
  color:green;
}

<div class="foo">
   ...
  <h2> ---> can be the first another</h2>
   <span> ---> can be the first</span>
  
   <h1> ---> can be the first</h1>
   
   and so on...
   ...
</div>

Answer 3

.foo>*:first-child {
    /*style here*/
}

Answer 4

是有很多方法可以实现这一目标：

.foo > :first-child {
    /* Your Styles */
}

.foo > :first-of-type {
    /* Your Styles */
}

.foo > :nth-child(1) {
   /* Your Styles */
}

Answer 5

CSS 2.1定义selector syntax，如下所示：

简单选择器可以是type selector或universal selector，后面紧跟零个或多个attribute selectors，ID selectors或{{3} }，在任何   订购。 [...]

选择器是一个由一个或多个简单选择器组成的链   组合子。组合器是：空格，“＆gt;”和“+”。

^{注意：CSS3中的术语略有不同。}

因此，您的简单选择器必须始终以类型选择器或通用选择器开头。如果您不知道要匹配的元素的类型，请使用pseudo-classes：

通用选择器，写为“*”，匹配任何元素的名称类型。它匹配universal selector中的任何单个元素。

但是，在这种情况下，通用选择器并不是唯一的，还有:first-child伪类。所以你可以省略*：

如果通用选择器不是document tree的唯一组件，则可省略“*”。

因此，简单的选择器将是其中之一（它们是等效的）：

:first-child

*:first-child

完整选择器将是

.foo :first-child

.foo *:first-child

在不知道第一个孩子的类型的情况下选择第一个孩子

5 个答案: