Question

我有一个视图，其中kendo框架根据用户点击通过JQuery动态添加下拉列表。让我们将它们命名为A，B和C.

页面加载时的div是这样的

<div id="fieldSet">
</div>

用户开始点击这些下拉后，div开始添加。

我想设置样式，这些下拉的左侧位置类似于A为40％，B 50％和C为60％。

我可以使用哪种类型的选择器？由于kendo会根据用户点击动态添加下拉菜单。如果用户首先点击B内容类型，则首先添加内容类型b。如果用户点击A，则会先添加。这是它的html：

<div id="fieldSet">
      <div  class ="fieldSetDropDown"> Drop down  A</div>
      <div  class ="fieldSetDropDown"> Drop down B</div>
      <div  class ="fieldSetDropDown"> Drop down C </div> 
</div>

那么如何在这个场景中设置左侧位置???

注意：正如我所提到的那样，通过kendo，一个外部jquery库添加，我对它的添加方式没有任何控制，所以我无法修改它添加的html。我也不允许添加任何jQuery或JavaScript代码。我只是有权添加css。

方法我尝试过但失败了： 我试过像

这样的兄弟选择器

#fieldSet .fieldSetDropDown{
left:40%
}

#fieldSet .fieldSetDropDown~ .fieldSetDropDown{
left:50%
}

#fieldSet .fieldSetDropDown~ .fieldSetDropDown ~ .fieldSetDropDown{
left:60%
}

这种方法很好，但只有在单击序列a，b和c中的内容类型时才能正常工作。但如果我不遵循它没有遵循的顺序。假设如果我先点击B下拉，它将是第一个div添加，它将40％应用于B.主要问题是这些下拉没有ID，只有同一个类＆＃34; fieldSetDropDown＆＃34;

Answer 1

尝试nth-child选择器：

.fieldSetDropDown:nth-child(1) {
left:40%
}

.fieldSetDropDown:nth-child(2) {
left:50%
}

.fieldSetDropDown:nth-child(3) {
left:60%
}

BTW：你的HTML中有一个拼写错误：＆＃34; classs＆＃34;必须是＆＃34; class＆＃34;

如何将样式应用于动态添加的div？

1 个答案: