當存在一個具有特定類的子元素時應用CSS

我有一個動態HTML結構，並且我只想在存在包含一個特定類的元素時應用CSS規則。當存在一個具有特定類的子元素時應用CSS

<div class="inline-container"> 
    <div class="form-element> 
     <label class="paragraph">Some text</label> 
     <div class="select-wrapper"> 
     <select> 
      <option value="1">1</option> 
     </select> 
     </div> 
    </div> 
    <input type="hidden"> 
    <input type="hidden"> 
</div>

當輸入類型被啓用時，它們的結構變成與「form-element」相同的結構，當然也具有相同的類。我只想在代碼中啓用一個樣式時應用樣式。我想應用的樣式適用於標籤和選擇。我已經嘗試過使用獨特的孩子或只有類型，但不適用於這種情況。

label:only-child { 
    padding: 0% 29% 0% 0% !important; 
} 
div:only-child { 
    select { 
     padding: 0% 10% 0% 59% !important; 
    } 
}

的HTML不能修改只有CSS（.LESS文件）

來源

2017-09-06 Mateo Hermosilla

你能顯示示例標記，你想選擇申請？ – Danield

相關 - 我認爲 - https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector –

也 - https://stackoverflow.com/questions/5545649/can-i-combine- n-child-or-any-type-with-an-any-selector –

你可以試試下面的代碼，請注意，填充不會爲選擇工作，所以可以使用appearance:none。

我把標籤放在選擇的包裝下面，並用flex將它向上移動。

label{ 
 
    padding: 0% 29% 0% 0%; 
 
} 
 
.select-wrapper + label{ 
 
    padding: 0% 0% 0% 0%; 
 
} 
 
div:only-child select{ 
 
    padding: 0% 10% 0% 59% !important; 
 
    -webkit-appearance: none; 
 
} 
 

 
.form-element { 
 
\t display: -webkit-flex; 
 
\t display: -webkit-box; 
 
\t display: -moz-box; 
 
\t display: -moz-flex; 
 
\t display: -ms-flexbox; 
 
\t display: flex; 
 
\t -webkit-flex-flow: column wrap; 
 
\t flex-flow: column wrap; 
 
} 
 
.paragraph { 
 
\t -webkit-box-ordinal-group: -1; 
 
\t -moz-box-ordinal-group: -1; 
 
\t -webkit-order: -1; 
 
\t -ms-flex-order: -1; 
 
\t order: -1; 
 
}

<div class="inline-container"> 
 
    <div class="form-element"> 
 
     <div class="select-wrapper"> 
 
     <select> 
 
      <option value="1">1</option> 
 
     </select> 
 
     </div> 
 
     <label class="paragraph">Some text</label> 
 
    </div> 
 
    <input type="hidden"> 
 
    <input type="hidden"> 
 
</div>

來源

2017-09-06 07:31:33

謝謝但HTML無法修改我只需要處理樣式。所以這個解決方案對我來說工作不正常...... –

我試着用你的代碼以及它的工作正常，https://jsfiddle.net/sandymizz/hf459qoa/2/ –

當有兩個或更多「元素「不是什麼都不做（這很好），但是當只有一個不是應用填充:( –

當存在一個具有特定類的子元素時應用CSS

回答

相關問題