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>

当输入类型被启用时，它们的结构变为＆＃34; form-element＆＃34;当然还有同样的课程。我只想在代码中启用一个样式时应用样式。我想要应用的样式是标签和选择。我曾尝试过只使用小孩或只使用类型，但在这种情况下不能正常工作。

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>

当存在一个具有特定类

1 个答案: