html - 当存在一个特定类(class)的 child 时应用 CSS

Question

我有一个动态 HTML 结构，我只想在存在一个包含一个特定类的元素时应用 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>

当启用输入类型时，它们的结构更改为与“表单元素”相同的结构，当然还有相同的类。我只想在代码中启用一个样式时应用样式。我要应用的样式用于标签和选择。我尝试过使用 only-child 或 only-of-type，但在这种情况下效果不佳。

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

HTML 只能修改 CSS(.less 文件)

Answer 1

您可以尝试下面的代码，请注意，填充对选择不起作用，因此可以使用 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 {
	display: -webkit-flex;
	display: -webkit-box;
	display: -moz-box;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: column wrap;
	flex-flow: column wrap;
}
.paragraph {
	-webkit-box-ordinal-group: -1;
	-moz-box-ordinal-group: -1;
	-webkit-order: -1;
	-ms-flex-order: -1;
	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>