Question

我正在尝试格式化文本＆＃39; Portfolio＆＃39;只使用下面的CSS。但是，这也是选择文本＆＃39;客户端＆＃39;也。我不明白为什么选择:first-child时会出现这种情况？是因为我有一个第二课.group2，然后使文本＆＃39;客户＆＃39;第一个孩子？虽然它不是投资组合的第一个孩子。这里的逻辑是什么？

<div class="portfolio">
    <div class="container">
        <h3>Portfolio</h3>
    <div class="group1">
        <img src="http....." style="height: 506px; width: 675px">
    <div class="group2">
        <h3>Client</h3>
        <h4>JPMorgan</h4>
        <h3>Role in Project</h3>
        <h4>Project Lead</h4>
        <h3>Project Included</h3>
        <h4>Mobile and Web Interface</h4>
        <a href="#">Browser</a>
    </div>
    </div>
    </div>
    </div>

<style>    

 .portfolio h3:first-child {
 color: #292929;
 border-bottom: 3.5px solid #E1E1E1;
 width: 130px;
 margin: 0px auto;
 font-size: 1.5em;
 text-transform: uppercase;
 text-shadow: 0px 0px 1px #292929;
 text-align: center;
 padding-bottom: 10px;
 font-family: inherit;
 }
</style>

Answer 1

试试这个：

.container > h3 {
 color: #292929;
 border-bottom: 3.5px solid #E1E1E1;
 width: 130px;
 margin: 0px auto;
 font-size: 1.5em;
 text-transform: uppercase;
 text-shadow: 0px 0px 1px #292929;
 text-align: center;
 padding-bottom: 10px;
 font-family: inherit;
 }

Answer 2

你的问题是选择器：

.portfolio h3:first-child

这将选择任何h3作为h3父母的第一个孩子。请注意，此父级不需要是.portfolio！

.portfolio > div > h3:first-child

使用此表示法，您可以明确定义要拥有的DOM的路径。 h3必须在<div>范围内，且必须在.portfolio范围内。

Answer 3

开平！

是，＆＃34;：first-child CSS伪类表示任何元素，它是其父元素的第一个子元素。＆＃34; 在这种情况下，h3与＆＃34;客户＆＃34;是父母的第一个孩子。父亲是.group2。

：第一个孩子选择两个元素

3 个答案: