嵌套的CSS背景圖像不會改變3級後

我有一個divs的嵌套列表，在第三級之後它似乎沒有更新樣式。嵌套的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不，這不是它的工作原理。最裏面的span是在'data-attr-listtype =「dash」'的div裏面，所以這就是應用的規則。是的，它也在'data-attr-listtype =「square」'div的內部，但是破折號的規則被應用，因爲它在樣式表中最後。 –

好的，謝謝你的解釋:) – grimmus

嵌套的CSS背景圖像不會改變3級後

回答

相關問題