向第一個對象的子項添加樣式內容

Question

我想選擇頁面的第一個<fieldset>，然後在::after內部輸入<legend>。

我試過了，通過選擇fieldset:first-child > legend::after {，但這並沒有給它任何風格。

我也嘗試過通過選擇fieldset > legend:first-child::after {，但是這給了所有圖例的添加內容，因爲它是場集的第一個孩子。

通過我的代碼取得結果：

預期/希望得到

jsFiddle DEMO that replicates the issue

任何只有CSS的建議和/或解決方案都是值得歡迎的。

Answer 1

嘗試將fieldset > legend::after更改爲fieldset:first-of-type > legend::after。 :first-item不是有效的選擇器，但:first-of-type將做你以後的事情。

fieldset:first-of-type > legend::after { 
 
    content: " ADDED CONTENT"; 
 
    color:red; 
 
    font-weight:bold; 
 
}

<fieldset> 
 
    <legend>This legend needs added content</legend> 
 
</fieldset> 
 

 
<fieldset> 
 
    <legend>This legend doesn't need added content</legend> 
 
</fieldset> 
 

 
<fieldset> 
 
    <legend>This legend doesn't need added content</legend> 
 
</fieldset>

JS小提琴：http://jsfiddle.net/t7uyg96e/

Answer 2

Try with the first-child

fieldset:first-child > legend::after { 
    content: " ADDED CONTENT"; 
    color:red; 
    font-weight:bold; 
} 

Answer 3

試試這個片斷的CSS：

fieldset:first-child > legend::after { 
    content: " ADDED CONTENT"; 
    color: red; 
    font-weight: bold; 
}