其他类下的css first-of-type

Question

我有一个html文件，看起来像这样：

<div class="my_class">
    <h1>gets styled and that's good</h1>
    <h1>doesn't get styled and this is intended</h1>
    <div class="my_other_class">
        <h1>but this also get styled, but shouldn't</h1>
    </div>
</div>

<div class="my_class">
    <h1>do style</h1>
    <h1>don't style</h1>
    <div class="my_other_class">
        <h1>shouldn't but does</h1>
    </div>
</div>

现在我使用.my_class h1:first-of-type {...}来设置第一个h1样式。 然而，第三个也得到了风格，不应该。

有没有办法只选择第一个h1 ？

Answer 1

使用儿童组合器> 。

 .my_class > h1:first-of-type { color: red; } 

 <div class="my_class"> <h1>gets styled and that's good</h1> <h1>doesn't get styled and this is intended</h1> <div class="my_other_class"> <h1>but this also get styled, but shouldn't</h1> </div> </div> 

Answer 2

使用子选择器 ： > ：

.my_class > h1:first-of-type {...}

 .my_class > h1:first-of-type { color: red; } 

 <div class="my_class"> <h1>gets styled and that's good</h1> <h1>doesn't get styled and this is intended</h1> <div class="my_other_class"> <h1>but this also get styled, but shouldn't</h1> </div> </div> <div class="my_class"> <h1>do style</h1> <h1>don't style</h1> <div class="my_other_class"> <h1>shouldn't but does</h1> </div> </div> 

Answer 3

从chipChocolate.py得到答案。 但为了完整起见，请看一下：

    div, p  Selects all <div> elements and all <p> elements 
    div p   Selects all <p> elements inside <div> elements  
    div > p Selects all <p> elements where the parent is a <div> element

Answer 4

另一种方法是使用:first-child伪元素：

 .my_class > h1:first-child { color: red; } p { font-size:2em; } div div { margin-left:50px; } 

 <p>Main Div 1</p> <div class="my_class"> <h1>gets styled and that's good</h1> <h1>doesn't get styled and this is intended</h1> <p>Sub Div 1</p> <div class="my_other_class"> <h1>but this also get styled, but shouldn't</h1> </div> </div> <p>Main Div 2</p> <div class="my_class"> <h1>do style</h1> <h1>don't style</h1> <div class="my_other_class"> <h1>shouldn't but does</h1> </div> </div>