CSS：是否可以在另一個字段集之前爲字段集指定樣式？

Question

CSS：是否可以在另一個字段集之前指定字段集的樣式？當兩個字段集在我的代碼中跟隨時，我想將它們應用於特定的樣式。

編輯如果不使用類，當然ID ...

這裏是我的代碼

 <div id="tabs"> 
      <fieldset class="one"> 
       <legend>One</legend> 
       Text 
      </fieldset> 
      <fieldset class="two"> 
       <legend>Two</legend> 
       Text 
      </fieldset> 
     </div> 

THS給我這個：

而且我想這樣的：

Answer 1

使用CSS，您可以將樣式僅應用於任何元素或其兄弟的子元素，這就是爲什麼我們只能在第二個fieldset上使用樣式使用+鄰接兄弟選擇器。在下面的演示中，我將演示如何做到這一點。

關於所有可能CSS2選擇你可以在閱讀specification讓自己明白：你可以用CSS選擇器並沒有什麼

可能是我的解釋demo on dabblet.com可以幫助你解決你的問題做出什麼。

結果：

HTML標記：

<fieldset> </fieldset> 
<fieldset> </fieldset> 
<fieldset> </fieldset> 
<fieldset> </fieldset> 

CSS標記：

/* detect only first fieldset */ 
fieldset:first-child { 
    background-color: green; 
} 

/* detect all sibling fieldset element after first one */ 
fieldset:first-child ~ fieldset { 
    background-color: gray; 
} 

/* detect only first sibling fieldset element after first one */ 
fieldset:first-child + fieldset { 
    background-color: red; 
} 

Answer 2

爲什麼不爲每個人分配一個特定的類或ID？

<fieldset class="firstset"></fieldset> 
<fieldset class="secondset"></fieldset> 

Answer 3

不使用任何類或ID的，你可以使用first-child爲目標的第一個，然後使用第二個默認的樣式。

例如

form fieldset{ background: green; } 
form fieldset:first-child{ background: red; } 

第一個字段集將有一個紅色的背景，任何其他的將有一個綠色的背景。請注意，雖然這是針對同一表單中的字段集。如果它們處於不同的形式，那麼您可以使用相同的原則使用form:first-child

Answer 4

如果您想避免使用ID或類名稱，則請轉到第一個子項屬性。

對於如 -

form fieldset:first-child{ 
    //your css code here 
} 

Answer 5

如果你不想使用類或ID的，但仍希望他們有不同的風格，如何使用內聯CSS爲每個字段集？

是否有特別好的理由避免類和id的同時仍想使用CSS？稍微詳細一點，我們可以給你一個更好的答案。