第一个孩子伪选择器问题与标题标记 [英] First-child pseudo selector issue with heading tag

问题描述

我在设计动态新闻页时遇到困难，当我在我的部分的开头添加一个标题标记，并且div中的p标签的第一个孩子停止工作。
这是我想要做的，它是工作，直到我添加标题标签。

HTML：

 < section class =content> 
< h2>新闻< / h2> // issue 
< div class =pubs> 
< p class =newsdate> stuff< / p> 
< / div> 
< div class =pubs> 
< p class =newsdate> stuff< / p> 
< / div> 
< div class =pubs> 
< p class =newsdate> stuff< / p> 
< / div> 
< / section> 
  

CSS：

 code> .pubs .newsdate {
 border-top：1px solid rgb（255,179,0）; 
} 
 .pubs：first-child .newsdate {
 border：none; 
} 
  

正确删除第一个边框，直到我添加标题（h2） 。
然后，伪选择器停止工作。
可能发生了什么？

提前感谢。

解决方案

.pubs：first-child 寻找其父元素的 pubs （也是第一个子）类别在这种情况下，父元素是类 content 。在第一个 h2 > pubs 类，那么 pubs 不再是第一个

请尝试 .pubs：first-of-type ：

  .pubs：first-of-type .newsdate {
 border：none; 
} 
  / pre> 
 
 
 ：first-of-type 伪选择器将查找第一个 type 无论你在哪个类或ID或元素前面加上它，我的意思是，如果一个元素（ div ）， code> .pub ），或者在伪选择器之前有一个ID（ #pub  
 
 
 
也请注意，我先说键入，而不是使用ID。第一个实例（两个人已经评论（一个人删除了他们的评论）混淆了我在说什么）。例如，如果你在三个 div 元素和两个 p 元素上有类 .pubs  code>元素，您的：first-of-type 伪选择器将应用于第一个 .pubs div 元素 AND 第一个 .pubs p 元素。 
 
 
 
因此，第一类型伪选择器可应用于多个元素取决于你如何使用它。
 
 
 
如果你想到这是一个更好的解决方案比你第一次工作，因为这个解决方案看起来专门为第一 .pubs 类的实例，而您的示例仅工作在周围（当 .pubs 之前没有任何内容时） 。
 
I got stuck when designing a dynamic page of news today when I added a heading tag at the beginning of my section and the first-child of a p tag inside a div stopped working.
This is what I was trying to do and it was working until I add the heading tag.

HTML:
<section class="content">
    <h2>News</h2> //issue
    <div class="pubs">
        <p class="newsdate">stuff</p>
    </div>
    <div class="pubs">
        <p class="newsdate">stuff</p>
    </div>
    <div class="pubs">
        <p class="newsdate">stuff</p>
    </div>
</section>
CSS:
.pubs .newsdate {
    border-top:1px solid rgb(255,179,0);
}
.pubs:first-child .newsdate {
    border:none;
}
The first border was being removed properly until I added the heading (h2) tag.
Then, the pseudo selector stopped working.
What could have happened? 

Thanks in advance.
解决方案
.pubs:first-child looks for a class of pubs that is also the first child of its parent element (in this case, parent element is class content. Once you add an h2 element before the first pubs class, then pubs is no longer the first child, but the second.

Try .pubs:first-of-type instead:
.pubs:first-of-type .newsdate {
    border: none;
}
The :first-of-type pseudo-selector will look for the first type of whichever class or ID or element you prepend it with. By this, I mean that it doesn't matter if an element (div), a class (.pub), or an ID (#pub) comes before the pseudo-selector (each one is valid). Although it wouldn't make much sense to use an ID, since those are supposed to be unique.

Also notice I said first type, not first instance (two people have already commented (one deleted their comment) confusedly about what I'm saying). For instance, if you have class .pubs on three div elements and two p elements, your :first-of-type pseudo-selector would apply to the first .pubs div element AND the first .pubs p element. 

So first-of-type pseudo-selector can apply to multiple elements, depending on how you use it.

If you think about it, this is a better solution than when you first had it working, because this solution looks specifically for the very first instance of the .pubs class, whereas your example only works circumstantially (when there isn't anything before .pubs).

                        
这篇关于第一个孩子伪选择器问题与标题标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！