CSS;есть ли способ не применять CSS для определенного div и его детей - PullRequest
Новая
       25

CSS;есть ли способ не применять CSS для определенного div и его детей

0 голосов
/ 25 октября 2019

Я использую выбранный jquery выпадающий на моей веб-странице, элемент управления выпадающего списка находится внутри div. 

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

Eaxmple: http://jsfiddle.net/2bhrLxoa/

После раздачи, плагин выпадающийзначения в div и плагин css наследует пользовательские настройки класса css для div. 

<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?

Просмотр при наследовании 4-пиксельного отступа; enter image description here

Просмотр без 4-пиксельного дополнения; enter image description here

1 Ответ

1 голос
/ 25 октября 2019

Вам нужно сбросить заполнение на .chosen-drop на начальное и unset на его дочерних элементах, чтобы они все еще могли наследовать от своих родителей.

Узел: Вы должны загрузить этот 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>

В вашем случае это работает ( fiddle ): 

.chosen-container {
  padding: initial;
}

.chosen-container div {
  padding: unset;
}
...