如何將不同的CSS樣式應用於子元素？

例如我的HTML是這個如何將不同的CSS樣式應用於子元素？

<ul> 
    <li>Sample 1</li> 
    <li>Sample 2 
     <ul> 
      <li>Sub 1</li> 
      <li>Sub 2</li> 
      <li>Sub 3 
       <ul> 
        <li>Grandsub 1</li> 
        <li>Grandsub 2</li> 
        <li>Grandsub 3 
         <ul> 
          <li>verySub 1</li> 
          <li>verySub 2</li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>Sample 3</li> 
</ul>

我想在每一個孩子<UL>使用不同的樣式沒有定義他們的任何class和id。

我不知道<ul>多少孩子可能裏面一個出現另一個所以內聯CSS將不工作

這可能嗎？

來源

2010-05-27 Starx

所有你需要的是指定像這樣每個級別：

<style type="text/css"> 
ul li { color: red; } 
ul li ul li { color: blue; } 
ul li ul li ul li { color: black; } 
ul li ul li ul li ul li { color: green; } 
</style>

沒有內嵌style屬性，無需類。

完美適用於您提供的HTML代碼片段。請記住，每個連續的級別都將從它之前的級別繼承。這就是CSS的「級聯」部分的全部概念，但我已經燒燬了自己忘記了更低級別的利潤並讓事情變得不合時宜。

來源

2010-05-27 07:36:14 artlung

但我不知道UL有多少內部可以有 – Starx 2010-05-27 07:50:27

你仍然可以使用相對定位（left：20px;）因爲它會加在每個孩子身上。否則，我想知道可以用6個或10個或20個嵌套列表表示什麼！ – FelipeAls 2010-05-27 08:41:42

你是否明白顏色的最後一條規則：綠色;將應用於深度爲4和更多的每個列表項目？如果前面的規則不存在，那麼「ul li ul ul li li ul li li li li li」的樣式將由「ul li ul li li li li li」定義。 – FelipeAls 2010-05-27 08:43:33

您可以對每個元素使用「內聯樣式」以使其具有不同的樣式。

這就是：

<ul style="property:value;"> 
    <li>..</li> 
</ul>

來源

2010-05-27 07:23:11

我不知道有多少孩子可能會出現在另一個內部，所以內聯css不會到工作 – Starx 2010-05-27 07:30:23

如果你不知道有多少個孩子UL/LI可能在彼此內部，那麼在CSS中這是不可能的。

CSS不支持「模糊邏輯」，如：if there are over 5 <li>'s then do something.

的Javascript是未來的方向我，認爲！

來源

2010-05-27 08:35:01

它看起來像你想要以編程方式定義你的風格的某種方式。單獨使用CSS是不可能的。它不支持你定義自己的符號名稱，更不用說試圖做更多的「程序設計」了。如果你能夠動態生成你的CSS，那麼你可以用它來計算出層次的數量，並在每次算法上定義樣式

否則，替代方法是在嵌套層次上設置最大值（比如說20個層次）併爲每個人定義一個樣式，如artlung建議。大多數時候，較低級別的定義不會被使用，但如果您需要它們，它們將會在那裏。這並不完美，但它是直接在CSS中編寫的最佳選擇。

來源

2010-05-27 08:45:41

這使用jQuery和循環通過三種背景顏色列表：

function nestedcolour(elements, level) { 
    if (elements.length > 0) { 
     var colour = ["#fafafa", "#fbf9ea", "#eeeeee"][level % 3]; 
     elements.css('background-color', colour); 
     nestedcolour(elements.children("ul").children("li"), level + 1); 
    } 
} 

$(document).ready(function() { 
    nestedcolour($(".classofparentelement"), 0); 
});

的.classofparentelement是不是真的有必要，你可以用任何方法來查找父元素（一個或多個）。

來源

2010-05-27 11:51:07 gpvos

如何將不同的CSS樣式應用於子元素？

回答

相關問題