Вложенное изображение css не меняется после 3 уровней

У меня есть вложенный список div, после третьего уровня он, похоже, не обновляет стиль.Вложенное изображение css не меняется после 3 уровней

Это CSS:

.list_unordered .list_item { 
    background:none transparent no-repeat 3px 7px !important; 
} 
.list_unordered[data-attr-listtype="bullet"] .list_item { 
    background-image:url("../Images/list_bullet.png") !important; 
} 
.list_unordered[data-attr-listtype="square"] .list_item { 
    background-image:url("../Images/list_square.png") !important; 
} 
.list_unordered[data-attr-listtype="dash"] .list_item { 
    background-image:url("../Images/list_dash.png") !important; 
}

И это HTML:

<div class="list_unordered" data-attr-listtype="bullet"> 
    <div class="list_item"> 
    <span class="text">Rondje 1</span> 
    <div class="list_unordered" data-attr-listtype="square"> 
     <div class="list_item"> 
     <span class="text">Blokje 2</span> 
     <div class="list_unordered" data-attr-listtype="dash"> 
      <div class="list_item"> 
      <span class="text">Streepje 3</span> 
      <div class="list_unordered" data-attr-listtype="square"> 
       <div class="list_item"> 
       <span class="text">Blokje 4</span> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="list_item"> 
    <span class="text">Rondje 1</span> 
    </div> 
</div>

Это результат:
Result
Как вы можете видеть, четвертый элемент должен быть квадрат, но он отображается как тире. В чем причина этого? И как я могу это исправить?

источник

2013-12-12 Marvin Brouwer

возможно, что это происходит потому, что правило CSS квадрат уже применяется к внешнему DIV, который перезаписывается двумя следующими из них, а когда CSS будет быть примененным к самому внутреннему div, он уже там? Я не уверен, хотя, если бы вы могли предоставить jsfiddle для этого, я мог бы протестировать его – Enermis

Это было бы быстрое решение:

.list_unordered .list_item { 
    background:none transparent no-repeat 3px 7px !important; 
} 
.list_unordered[data-attr-listtype="bullet"] > .list_item { 
    background-image:url("../Images/list_bullet.png") !important; 
} 
.list_unordered[data-attr-listtype="square"] > .list_item { 
    background-image:url("../Images/list_square.png") !important; 
} 
.list_unordered[data-attr-listtype="dash"] > .list_item { 
    background-image:url("../Images/list_dash.png") !important; 
}

источник

2013-12-12 14:25:53 Zhonk

Это работало как шарм! Большое спасибо –

Если вы в основном создаете вложенные списки, вы должны использовать правильные элементы HTML, см. this fiddle, вы также можете очистить свой HTML и автоматически добавить CSS в стиль, не требуя атрибутов data.

HTML

<ul> 
    <li>Level 1 
     <ul> 
      <li>Level 2 
       <ul> 
        <li>Level 3 
         <ul> 
          <li>Level 4</li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul>

CSS

li{ 
    list-style-type:circle; 
} 

li li { 
    list-style-type:square; 
} 

li li li { 
    list-style-type:disc; 
} 

li li li li{ 
    list-style-type:lower-alpha; 
}

источник

2013-12-12 14:20:46 SW4

, это может быть способ сделать то же самое, но это не объясняет, почему исходный пост не ведет себя так, как ожидалось. – Enermis

Вы правы, Я создаю вложенные списки. К сожалению, я должен сделать это так из-за плагина JavaScript, который я использую здесь. –

Это лучший ответ, чем принятый, хотя ... –

Три CSS правила все имеют точно такую же специфичность, так что последние из них будут применены (один с streepje). Как глубоко элемент вложен внутри другого элемента, не является частью специфики.

источник

2013-12-12 14:23:56

Является ли атрибут, указанный в квадратных скобках, каким-то образом их не отделяет? – grimmus

@grimmus Нет, это не так, как это работает. Самый внутренний диапазон находится внутри div с 'data-attr-listtype =" тире "', поэтому это правило применяется. Да, это ТАКЖЕ внутри div с 'data-attr-listtype =" square "', но правило для тире применяется, потому что оно приходит последним в таблице стилей. –

ОК, спасибо за объяснение :) – grimmus

Вложенное изображение css не меняется после 3 уровней

ответ

Смежные вопросы