Question

我尝试使用first-child和last-child项创建样式，但我遇到了问题。

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

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/

任何人都知道为什么会这样吗？

谢谢，

Answer 1

这是因为你有一个“强”标签作为第一个孩子，而不是你要去的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/

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

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/

最后，如果你想完全按照你想要的方式保留你的html，你可以使用first-of-type伪类。只需更改你的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/

Answer 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 Fiddle demo

如果您的HTML仍然具有类似的可预测性（.title_block_info元素将始终遵循:first-child元素），您可以改为：

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

JS Fiddle demo

参考文献：

CSS3的First-child和last-child伪属性

2 个答案: