时间戳

首页 > 解决方案 > CSS；有没有办法不对某些 div 及其子级应用 css

html - CSS；有没有办法不对某些 div 及其子级应用 css

问题描述

我在我的网页上使用选择的 jquery 下拉列表，下拉列表控件位于 div 内。

<div >
<asp:DropDownList  ID="selUser" runat="server" class="chosen-select" data-placeholder="Select a Distributor"></asp:DropDownList>
</div>

示例：http : //jsfiddle.net/2bhrLxoa/

渲染后，插件下拉值在 div 中，并且插件 css 正在继承 div 的自定义 css 类设置。

<div>
    <select id="selUser" class="chosen-select" style="width: 200px; display: none;">
        <option value="0">Select User</option>
        <option value="1">Yogesh singh - 12087</option>
        <option value="2">Sonarika Bhadoria - 120875</option>
        <option value="3">Anil Singh - 1208766</option>
        <option value="4">Vishal Sahu - 12087765</option>
        <option value="5">Mayank Patidar - 120870</option>
        <option value="6">Vijay Mourya - 12087675</option>
        <option value="7">Rakesh sahu - 120876433</option>
    </select>
    <div class="chosen-container chosen-container-single chosen-with-drop chosen-container-active" title="" id="selUser_chosen" style="width: 80%;">
        <a class="chosen-single">
            <span>Select User</span>
            <div>
                <b></b>
            </div>
        </a>
        <div class="chosen-drop">
            <div class="chosen-search">
                <input class="chosen-search-input" type="text" autocomplete="off">
                </div>
                <ul class="chosen-results">
                    <li class="active-result result-selected" data-option-array-index="0">Select User</li>
                    <li class="active-result" data-option-array-index="1">Yogesh singh - 12087</li>
                    <li class="active-result" data-option-array-index="2">Sonarika Bhadoria - 120875</li>
                    <li class="active-result" data-option-array-index="3">Anil Singh - 1208766</li>
                    <li class="active-result" data-option-array-index="4">Vishal Sahu - 12087765</li>
                    <li class="active-result" data-option-array-index="5">Mayank Patidar - 120870</li>
                    <li class="active-result" data-option-array-index="6">Vijay Mourya - 12087675</li>
                    <li class="active-result" data-option-array-index="7">Rakesh sahu - 120876433</li>
                </ul>
            </div>
        </div>
    </div>

此 div 继承自自定义类的填充

    <div class="chosen-drop">

网页正在使用自定义 css 文件，其中 div 对整个页面有 4px 填充，我无法更改。

div {
    padding: 4px;
}

有没有办法不继承 div css 设置？

继承 4px 填充时查看； 在此处输入图像描述

没有 4px 填充的视图； 在此处输入图像描述

标签： htmlcssjquery-chosen

解决方案

您需要将 padding 重置为.chosen-dropinitial ，并在它的孩子上取消设置，这样他们仍然可以从他们的父母那里继承。

节点：你应该在插件的 CSS 之前加载这个 CSS，所以插件可以覆盖它。

div {
  padding: 2em;
  border: 1px solid black;
}

.chosen-drop {
  padding: initial;
}

.chosen-drop div {
  padding: unset;
}
<div>
  outside chosen-drop
  <div class="chosen-drop">
    chosen-drop
    <div>inside chosen-drop</div>
  </div>
</div>

在您的情况下，这有效（小提琴）：

.chosen-container {
  padding: initial;
}

.chosen-container div {
  padding: unset;
}

推荐阅读