樣式列表項

我有一個div結構像底部：樣式列表項

<div class="body-content"> 
    <div class="col-middle"> 

    </div> 
</div>

我想要做的就是定身，內容類內的列表項的樣式，並確保它不COL-中間

內，向什麼，我認爲這會是這樣的......

.body-content li { }

但它適用這些樣式列出山坳中等內的項目太多。

來源

2009-10-06 Brad

最簡單和向後兼容的選項是：

div.body-content li { /* some style */ } 
div.col-middle li { /* some other style */ }

你也許能夠使用子選擇器：

div.body-content > ul li

但它在IE6中不受支持。

除此之外，它取決於您的標記是如何編寫的以及您對瀏覽器支持的要求是什麼。

如果可能的話，你的標記更改爲：

<div class="body-content"> 
    <div class="col-middle"> 
    ... 
    </div> 
    <div class="col-other"> 
    ... 
    </div> 
</div>

或類似的東西，所以你很容易區分哪些列表之間要風格。

來源

2009-10-06 14:15:41 cletus

您需要：

.body-content > ul li { ... }

這將僅選擇在.body-content一個ul的直接後裔列表項。

編輯：Ooops，錯誤的地方>！

編輯：對不起，也應該提到 - 兒童選擇器不能在IE6中工作。

來源

2009-10-06 14:14:39

「孩子選擇器不能在IE6中工作」 - 互聯網也沒有。 – 2009-10-06 14:27:48

哈哈和你在一起... :) – 2009-10-06 14:30:09

我會接零了。體內容.COL中等李{}的後造型的。體含量李{}的

你唯一的選擇就是到指定的李將會是：

.body-content .li-block li { }

來源

2009-10-06 14:14:40 Jakub

它沒關係，因爲它更具體。 – 2009-10-06 14:29:47

Restyle the col-middle。

div.body-content li { 
    color: red; 
} 

div.col-middle li { 
    // overrides stuff 
    color: black; 
}

樣式從父元素向下級聯到他們的孩子。

來源

2009-10-06 14:15:04

您應該使用，這將使風格只爲。體含量的兒子李

.body-content > ul li {}

來源

2009-10-06 14:15:28 yogsototh

您試過的代碼指定了如何在列表內的.body-content應該看上去，即使它們在.col-middle裏面。

使用CSS2沒有任何辦法做你想做的事情，appart指定了.col-middle之外的列表項應該如何工作，然後指定他們應該如何在.col-middle內部進行樣式化。

使用CSS3然而，你可以做這樣的事情：

:not(.col-middle) li{}

注意，這不以任何IE瀏覽器。

來源

2009-10-06 14:18:01 Marius

下面的例子似乎工作最好（我已經添加了一些額外的標記來演示這個），但我建議造型.body-content，然後在.col-middle中覆蓋這些樣式。這將是最具跨瀏覽器兼容性的。

<!DOCTYPE html> 

<html> 
<head> 
<title></title> 
<style type="text/css"> 
.body-content > *:not(.col-middle) li { 
    color: red; 
} 
</style> 
</head> 
<body> 

<div class="body-content"> 
    <div class="col-middle"> 
    <ul> 
     <li>item 1</li> 
     <li>item 2</li> 
    </ul> 
    </div> 

    <div> 
    <ul> 
     <li>item 1</li> 
     <li>item 2</li> 
    </ul> 
    </div> 

    <ul> 
    <li>item 1</li> 
    <li>item 2</li> 
    </ul> 
</div> 

</body> 
</html>

來源

2009-10-06 14:30:17

回答

相關問題