將css添加到名爲第一個孩子

此問題可以是我以前的問題Apply CSS for first letter的擴展。將css添加到名爲第一個孩子

現在在我目前的情況下，我想爲第一個div的類應用樣式爲section-sect1的段落。

以下是我的HTML。

<div class="chapter"> 
    <div class="figure"> 
    <img class="graphic" src="img.jpg" alt=""></div> 
    <div class="section-sect1"> 
    <a name="CH_00001-SEC-1"></a> 
    <div class="section-title"> 
     <span class="section-num"></span> Title</div> 
    <div class="para">Text1 
    </div> 
    <div class="para">Text2 
    </div> 
    </div> 
    <div class="section-sect1"> 
    <a name="CH_00001-SEC-1"></a> 
    <div class="section-title"> 
     <span class="section-num"></span> Title</div> 
    <div class="para">Text1 
    </div> 
    <div class="para">Text2 
    </div> 
    </div> 
</div>

我的CSS是

.chapter .section-sect1:first-of-type .section-title + .para:first-letter { 
border: 1px solid; 
font-weight: bold; 
color: red; 
}

這裏當我使用下面的CSS。

.chapter .section-sect1 .section-title + .para:first-letter { 
border: 1px solid; 
font-weight: bold; 
color: red; 
}

它選擇所有section-sect1的第一個字母，但我想只選擇第一.chapter的section-sect1。

這是一個工作小提琴。

請讓我知道如何解決這個問題。

來源

2016-08-01 user3872094

沒有'n級'選擇器。 –

如果我在這裏正確理解你，你需要在第一個實例'.section-sect1'中將這種風格應用於'.para'的第一個實例嗎？如果是這樣的話，你需要對你的'n-child'選擇器特別重視，因爲@Paulie_D已經指出，沒有'n-class'（希望我們會看到它被引入到規格在不久的將來，這將是非常有益的）。這裏有一個使用'nn-child'選擇器來實現這個功能的例子：'.chapter .section-sect1：n-child（2）.section-title：first-of-type + .para：first-letter' – UncaughtTypeError

不幸的是：首先類型不能與類一起工作，只能使用html標籤。然而，在你的情況，你可以做這樣的事情：

.chapter .figure + .section-sect1 .section-title + .para:first-letter { 
    border: 1px solid; 
    font-weight: bold; 
    color: red; 
}

但是，如果你不能使用。圖，你將不得不增加一個類你的第一個.section僞-sect1的，或改變他的標籤，所以你可以使用一個標籤，而不是在CSS中的類：

<div class="chapter"> 
    <div class="figure"> 
    <img class="graphic" src="img.jpg" alt=""></div> 
    <section class="section-sect1"> 
    <a name="CH_00001-SEC-1"></a> 
    <div class="section-title"> 
     <span class="section-num"></span> Title</div> 
    <div class="para">Text1 
    </div> 
    <div class="para">Text2 
    </div> 
    </section> 
    <section class="section-sect1"> 
    <a name="CH_00001-SEC-1"></a> 
    <div class="section-title"> 
     <span class="section-num"></span> Title</div> 
    <div class="para">Text1 
    </div> 
    <div class="para">Text2 
    </div> 
    </section> 

</div> 


.chapter section:first-of-type .section-title + .para:first-letter { 
    border: 1px solid; 
    font-weight: bold; 
    color: red; 
}

來源

2016-08-01 11:24:50 shwarp

如果你想給兒童造型，那麼你需要把像樹這樣的數據。

我附上你例子，這裏是的jsfiddle：

https://jsfiddle.net/8b5z8gb4/6/

<div class="chapter"> 
    <div class="figure"> 
    <img class="graphic" src="img.jpg" alt=""> 
    </div> 

    <!-- Child Holder --> 
    <div class="child-holder"> 
    <!-- First Child --> 
    <div class="section-sect1"> 
    <a name="CH_00001-SEC-1"></a> 
    <div class="section-title"> 
     <span class="section-num"></span> Title</div> 
    <div class="para">Text1 
    </div> 
    <div class="para">Text2 
    </div> 
    </div> 
    <!-- Second Child --> 
    <div class="section-sect1"> 
    <a name="CH_00001-SEC-1"></a> 
    <div class="section-title"> 
     <span class="section-num"></span> Title 
    </div> 
    <div class="para">Text1 
    </div> 
    <div class="para">Text2 
    </div> 
    </div> 
</div> 
    </div> 

.chapter .child-holder .section-sect1:first-child { 
border: 1px solid; 
font-weight: bold; 
color: red; 
}

來源

2016-08-01 12:15:13

另一種方法是類適用於所有.section-sect1然後覆蓋.section-sect1除了第一個使用普通兄弟選擇：

.chapter .section-sect1 .section-title + .para:first-letter { 
 
    border: 1px solid; 
 
    font-weight: bold; 
 
    color: red; 
 
} 
 

 
.chapter .section-sect1 ~ .section-sect1 .section-title + .para:first-letter { 
 
    border:none; 
 
    font-weight: normal; 
 
    color: inherit; 
 
}

<div class="chapter"> 
 
    <div class="figure"><img class="graphic" src="img.jpg" alt=""></div> 
 
    <div class="section-sect1"> 
 
    <a name="CH_00001-SEC-1"></a> 
 
    <div class="section-title"> 
 
     <span class="section-num"></span> Title</div> 
 
    <div class="para">Text1 
 
    </div> 
 
    <div class="para">Text2 
 
    </div> 
 
    </div> 
 
    <div class="section-sect1"> 
 
    <a name="CH_00001-SEC-1"></a> 
 
    <div class="section-title"> 
 
     <span class="section-num"></span> Title</div> 
 
    <div class="para">Text1 
 
    </div> 
 
    <div class="para">Text2 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-08-01 12:43:45 blonfu

將css添加到名爲第一個孩子

回答

相關問題