Question

.content> p：first-child {border-top：1px solid＃666;颜色：rgba（127，191，63，0.72）; }

需要一些帮助来理解此CSS代码片段将产生什么样的结果，尤其是选择器部分。

谢谢。

Answer 1

.content > p:first-child
{
  color: red
}

<div class="content">
  <p>first paragraph</p>
  <p>second paragraph</p>
  <p>third paragraph</p>
</div>

结果只是说，方括号内的css规则将应用于所有获得类<p>...</p>->（content的元素的第一段（<div class="content"></div>））。

Answer 2

这是我第一次回答有关堆栈溢出的问题，现在您提到的上述代码行将选择具有class .content的所有div并抓住所有子段的问题（那些直接位于.content div内的元素，如果您的内容div中有另一个div包含多个段落，则不会选择它们）。然后是一个psedu选择器：第一个孩子，它将从那些中选择第一个段落选择的段落。

谢谢?

Answer 3

标记内的标记是其所在标记的子代。例如，在此代码中，所有<p>标记都是<div>标记的子代，因为它们位于{{1 }}。 div选择具有.content > p:first-child标签的内容类别的div的第一个孩子。在这种情况下，它是<p>标记，其文本为“第1段”。

<p>

Answer 4

.content > p:first-child

选择第一段元素(<p>)，它是具有类名“内容”的元素的直接子元素

您能帮我了解一下此CSS代码的作用吗？

4 个答案: