这是HTML代码,我不明白为什么<a>
第二个标签 <p>
有棕色:
.entry-content :first-child {
color: brown
}
<article id="post-5946">
<section class="entry-content">
<p>
<a href="#">HTML5 From Scratch</a>Very proud to announce my latest Pluralsight Course:
</p>
<p>
<a href="#">HTML5 From Scratch</a>Very proud to announce my latest Pluralsight Course:
</p>
</section>
</article>
当您查看此页面时,我看到两段,第一段和标签都是棕色的,第二段只有棕色,这不应该是这种情况,即第二段的颜色不应该有任何变化。
最佳答案
.entry-content :first-child
选择 .entry-content
的所有后代看看他们是否是 parent 的第一个 child 。
自第二个<a>
标签是其父标签的第一个子标签并且它是.entry-content
的后代, 它获得了风格。
你只想检查.entry-content
的直系 child ,你可以这样做:
.entry-content > :first-child
假设您希望第一段及其内容为棕色,请执行以下操作:
片段:
.entry-content > :first-child,
.entry-content > :first-child * {
color: brown
}
<section class="entry-content">
<p>
<a href="#">HTML5 From Scratch</a>Very proud to announce my latest Pluralsight Course:
</p>
<p>
<a href="#">HTML5 From Scratch</a>Very proud to announce my latest Pluralsight Course:
</p>
</section>
关于html - CSS :first-child with class selector picking up wrong elements to style?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42303006/