Question

假设我有一个包含3个块引用的html页面。如何在不使用类的情况下将第一个（页面的）块引用的背景设置为红色和css ？

我已经尝试过......

body blockquote: first-child {
    background-color: red;    
}

......没有成功。

感谢。

Answer 1

在一般情况下，单独使用CSS无法做到这一点。没有“类型的第一个后代”选择器，只有“类型的第一个孩子”。

但是，通常可以对标记进行假设。为明确起见，假设页面内容位于<div id=content>...</div>内，并且所有blockquote元素都显示为该元素的子元素。然后您可以使用:first-of-type选择器：

＆＃13;

<style>
#content blockquote:first-of-type {
    background-color: red;    
}
</style>
<div id=content>
<p>Some stuff
<blockquote>I am quoted.</blockquote>
<p>Some more stuff
<blockquote>I am quoted, too.</blockquote>
</div>

＆＃13;

Answer 2

为什么你的CSS不起作用：

您的HTML结构：

body
__ parent
____ blockquote
__ parent
____ blockquote

CSS：

body blockquote: first-child {
    background-color: red;    
}

这个CSS选择器实际上做的是 - 它选择首先出现在其父和不是正文中的每个blockquote。

当元素嵌套在其他元素中时，第一个孩子不会对身体标签起作用。它适用于父母。

请尝试使用此：

td.wsite-multicol-col:first-child blockquote {
    background: red;
}

这将选择第一个col并为其子项设置样式（blockquote）。它没有将样式设置为页面的第一个块引用。

为页面的第一个块引用定义样式

2 个答案:

为什么你的CSS不起作用：