1

我尝试使用第一个子项和最后一个子项创建样式，但遇到了问题。

当我使用第一个孩子时，因为之前有一个强大的项目，所以样式不适用。但我的最后一个孩子工作得很好。

HTML：

<br />
<h2 class="title_block">Info <strong>1</strong>
    <span class="title_block_info">+2</span>
    <span class="title_block_info">+1</span>
</h2>​

CSS：

h2 .title_block_info,
h2 strong {
    border: 1px solid #000;
}
h2 .title_block_info:first-child {
    border-radius: 10px 0 0 10px;
}
h2 .title_block_info:last-child {
    border-radius: 0 10px 10px 0;
}​

这里的例子：http: //jsfiddle.net/mYKRW/

有谁知道为什么会这样？

谢谢，

4

2 回答 2

3

这是因为你有一个“强”标签作为第一个孩子，而不是title_block_info你要去的班级。first-child仅当它实际上是元素的第一个子元素时才有效。

这有效

<h2 class="title_block">
    <span class="title_block_info">+2</span>
    <span class="title_block_info">+1</span>
</h2>​

http://jsfiddle.net/mYKRW/1/

如果你需要在那里的强文本，你可以试试这个，注意我是如何将你的两个跨度标签包装在另一个跨度标签中的。这将允许您使用第一个孩子和最后一个孩子

h2 .title_block_info,
h2 strong {
    border: 1px solid #000;
}
h2 span .title_block_info:first-child {
    border-radius: 10px 0 0 10px;
}
h2 span .title_block_info:last-child {
    border-radius: 0 10px 10px 0;
}​

<h2 class="title_block">
    Info <strong>1</strong>
    <span>
      <span class="title_block_info">+2</span>
      <span class="title_block_info">+1</span>
    </span>
</h2>​

http://jsfiddle.net/mYKRW/6/

first-of-type最后，如果您想完全按照自己的意愿保留 html，则可以使用伪类，只需更改您的 css。

h2 .title_block_info,
h2 strong {
    border: 1px solid #000;
}
h2 .title_block_info:first-of-type {
    border-radius: 10px 0 0 10px;
}
h2 .title_block_info:last-of-type {
    border-radius: 0 10px 10px 0;
}​

http://jsfiddle.net/mYKRW/9/

于 2012-06-23T14:50:17.560 回答
2

如果它也是父元素的，则:first-child伪类从选择器中选择第一个匹配的元素；正如您所注意到的，这不起作用，因为还有另一个元素是父元素的第一个子元素。.title_block_info :first-child

在您的情况下，您可以删除在 DOM 中strong占据位置的元素:first-child，或者您可以使用:first-of-type伪类来代替：

h2 .title_block_info:first-of-type {
    border-radius: 10px 0 0 10px;
}

JS 小提琴演示。

如果您的 HTML 将保持类似的可预测性（.title_block_info元素将始终跟随:first-child元素），您可以改为：

h2 :first-child + .title_block_info {
    border-radius: 10px 0 0 10px;
}

JS 小提琴演示。

参考：

于 2012-06-23T14:51:40.497 回答