当存在一个具有特定类的子元素时应用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

回答

相关问题