什么 CSS 选择器可以用来选择另一个 div 中的第一个 div

问题描述

我有类似的东西:

<div id="content><h1>欢迎来到汽车城熟食店！</h1><div style="font-size: 1.2em; font-weight: bolder;">2010 年 9 月 19 日</div>
... </div>

第二个 div(内容"div 中的第一个 div)的 css 选择器是什么，以便我可以在该 div 中设置日期的字体颜色?

您的问题最正确的答案是......

#content >div:first-of-type {/* css */}

这会将 CSS 应用于作为 #content 的直接子元素的第一个 div(它可能是也可能不是 #content 的第一个子元素)

另一种选择:

#content >div:nth-of-type(1) {/* css */}

I have something like:

<div id="content>

   <h1>Welcome to Motor City Deli!</h1>
   <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
   <div > ... </div>

What is the css selector for the second div (1st div within the "content" div) such that I can set the font color of the date within that div?

The MOST CORRECT answer to your question is...

#content > div:first-of-type { /* css */ }

This will apply the CSS to the first div that is a direct child of #content (which may or may not be the first child element of #content)

Another option:

#content > div:nth-of-type(1) { /* css */ }