Question

我试图定位页面的第一个h3但是击中了所有的h3s

我在下面尝试过，并使用“＆gt;”但是＆gt;只有当它直接在体内而不是嵌套时才有效。

body h3:first-of-type{ /*code*/ }

有什么想法吗？

我不想在任何地方添加ID。

http://jsfiddle.net/M2X9z/

Answer 1

First-of-type将在其父级中定位该类型的第一个元素，而不是在您指定的祖先中。所以，如果您的HTML就像

<body>
   <div>
      <h3>first</h3>
   </div>
   <div>
      <h3>second</h3>
   </div>
</body>

然后会定位两个h3元素，因为每个元素都是其父级中的第一个h3。

鉴于你只想要定位一个元素，看起来添加id似乎是明智的方法。

（也可以使用jQuery（它有一个:first选择器）来做这个，虽然这当然会依赖于javascript被启用，如果你不需要其它的话可能有点过头了的原因。）

Answer 2

：first-of-type伪类表示一个元素，它是其父元素子元素列表中第一个类型的兄弟。

http://www.w3.org/TR/css3-selectors/#first-of-type-pseudo

所以这不会起作用，你应该给它一个id并用它来选择它。

Answer 3

试试这个

body > div:first-child h3:first-of-type {
    color : red;
}

Answer 4

first-of-type只能从其父：

运行良好
h3:first-of-type { color:green; }

HTML

<h3>first</h3> <h3>second</h3>

http://jsfiddle.net/zQmR6/确实有效！

如果您有不同的div，则h3内的每个div被认为是第一个。

<div> <h3>first</h3> </div> <div> <h3>second</h3> </div>

http://jsfiddle.net/RMpGq/不起作用！

Answer 5

Njoy

h3:first-of-type {
     color: red;
 }

Demo

Answer 6

试试这个：

http://jsfiddle.net/D277X/

p:nth-of-type(1) {color:yellow; }

Answer 7

你为什么不试试：
body h3:first-child
first-child伪元素描述元素本身，而不是元素的子元素空间指定您正在寻找身体的后代。由于您不是在寻找直接后代，因此不应使用>。

第一种类型css选择一切

7 个答案:

试试这个