如何根据父项的name属性改变cssclass

Question

我需要你的帮助来解决 CSS 问题。我必须仅在一个由此创建的元素上更改 class：https://angular-ui.github.io/bootstrap/#/dropdown

该元素封装在生成的代码中，所以我不能给它一个 ID 或其他任何东西。我可以访问的唯一属性在 div (name="OrganizationTypes") 中，其中包含我需要更改的元素。

生成的代码如下所示：

<div class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown ng-pristine ng-valid ng-isolate-scope ng-not-empty open ng-touched" 
style="width: 100%; display: inline-block;" tabindex="0" uib-dropdown="" auto-close="outsideClick" 
name="OrganizationTypes" items="vm.availableOrganizationTypes" ng-model="vm.data.organizationTypes" type="text">
<ul class="ui-select-match form-control dropdown-toggle" uib-dropdown-toggle="" style="margin-bottom:2px;height:auto!important;min-height:31px;" aria-haspopup="true" aria-expanded="true">
    <!-- ngRepeat: selected in vm.selectedLabel track by selected.path -->
</ul>

<!-- I need to modify dropdown-menu for this ul -->
<ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu" style="width:inherit; overflow:auto; max-height:20em" ng-click="$event.stopPropagation()">
    <li class="ui-select-choices-group">
        <div>
            ...
        </div>
    </li>
</ul>
</div>

boostrap class 定义如下：

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

我需要将位置更改为相对位置。

我怎样才能做到这一点？我需要重新定义一个新的下拉菜单，但我不知道选择器如何。我在 CSS 方面绝对无能:(

提前致谢！

Answer 1

也许我误解了你的问题，但我认为你正在寻找 [attribute=value] 选择器。

在这里你可以找到例子CSS [attribute=value] Selector

对于你的情况，我认为你应该像这样构建一个选择器：

div[name=OrganizationTypes] .dropdown-menu {
   position: relative;
}

告诉我们这是否是您要找的 =)

如何根据父项的name属性改变cssclass

How to change css class according to the name attribute of a parent

css

angularjs

angular-ui-bootstrap

ui-select

dropdown