:first-child 选择两个元素

Question

我正在尝试使用下面的 CSS 仅格式化文本 'Portfolio'。但是，这也同时选择了文本 'Client'。我不明白为什么我选择:first-child时会出现这种情况？是不是因为我有第二个 class .group2，然后使文本 'client' 成为第一个 child？虽然还不是投资组合的first-child。这是什么逻辑？

<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> 内，而 <div> 必须在 .portfolio.

内

Answer 3

嘿嘿！

是的，"The :first-child CSS pseudo-class represents any element that is the first child element of its parent." 在这种情况下，带有 "Client" 的 h3 是 parent 的第一个 child。 parent 是 .group2。

:first-child 选择两个元素

:first-child selecting two elements

css

formatting