結合一類選擇與ID

我使用下面的CSS：結合一類選擇與ID

/* style.css */ 
#someId { 
    background-color: red; 
} 
#someId.medium { 
    width: 300px; 
} 
#someId.large { 
    width: 500px; 
}

與HTML：

<!-- medium.html --> 
<div id="someId" class="medium">hello, world</div>

和

<!-- large.html --> 
<div id="someId" class="large">hello, world</div>

我知道上面上的FireFox工作正常和歌劇，而且，它確實不是工作在IE6（驚喜，驚喜）。

我的問題是：

是上述CSS正確根據CSS-規範（和我在哪裏可以找到這個具體問題）？

什麼瀏覽器（在什麼平臺上）做&不支持？

更新：
這些ID是每個頁面中唯一的。我試圖通過medium.html和large.html來溝通，但顯然它不夠明顯。

更新2：
上面的代碼示例只是爲了說明我的問題。它不是生產代碼的一部分，它不是完整的。簡而言之，這只是一個例子，用一個非常具體的解決方案來展示問題。

來源

2010-02-25 Jacco

嗯關於那些重複的id屬性.. – 2010-02-25 12:58:17

這些ID是唯一的每個文檔。 – Jacco 2010-02-25 13:56:52

quirksmode有一個表格，其中包括瀏覽器支持哪些選擇器。不幸的是，沒有結合選擇器的測試。但ie6失敗multiple classes這並不令人感到意外。

w3c css specification介紹如何CSS選擇器要工作，有一個DIV.warning和E#myid這是不完全喜歡你的，但建議它應該工作（也許是在頁面解釋我沒有讀這一切;））

來源

2010-02-25 11:03:47 Mathieu

IE6失敗的多個類？Lame。 – casraf 2010-02-25 11:13:10

跛腳它可能是，它仍然是我的要求讓它在IE6中工作 – Jacco 2010-02-25 11:17:27

應該工作！這很奇怪。嘗試翻轉它們，如.large#someId。

來源

2010-02-25 10:53:21 casraf

應該在工作嗎？哪裏？在什麼平臺上用什麼瀏覽器？請更具體。 – Jacco 2010-02-25 10:55:10

應該在任何地方工作，這是一個非常基本的選擇，它甚至不是一個假的東西。 – casraf 2010-02-25 10:56:07

歡迎來到跨瀏覽器開發:( – Jacco 2010-02-25 10:57:34

Crikey。我從來沒有遇到過這個，但你完全正確。你的代碼應該像你期待的那樣工作。

我很確定只有IE 6會遇到問題。

來源

2010-02-25 12:05:44

如果你不需要「#someId」作爲一個id你可以把它變成一個類「.someId」，然後使用其他兩個類來擴展需要的地方......就像這個class =「someId medium」等。試試這個，看看它是否會工作。除此之外，它還是一個更好的解決方案，因爲在一個頁面上不能有兩個同名的ID。

.someId { 
    background-color: red; 
} 
.medium { 
    width: 300px; 
} 
.large { 
    width: 500px; 
}

然後..

<div class="someId medium">hello, world</div>

或

<div class="someId large">hello, world</div>

來源

2010-02-25 12:31:52 aleksandar

由於IE6不支持多個類，您的解決方案沒有區別原始的，但我需要的ID無論如何。此外，身份證是唯一的每個文件。 – Jacco 2010-02-25 12:37:41

好吧，我試過... :( 無論如何，你仍然不能有更多，然後在同一頁上有一個唯一的ID 你是否是因爲我使用這種方法寫css時，它總是爲我工作。使用IETester測試im ... – aleksandar 2010-02-25 12:46:52

IE 6支持HTML中的多個類，它不支持正確的是多重class * selector * in CSS。所以'class =「someId medium」'可以工作，但對於IE 6，'.someId.medium'和'.medium'是相同的選擇要麼。 – 2010-02-25 12:49:53

不知道拖着Javascript庫到組合有可能在你的應用程序，但使用jQuery的時候很多CSS的並不在IE6很好地工作是可能的。

但是，如果你沒有其他用途的24kb jQuery庫，它似乎是一個單一的CSS屬性的沉重插件。也許你可以與優雅退化？

來源

2010-02-25 14:08:42

使用JavaScript解決CSS問題會混合腳本和佈局。所以這個選項已經結束了。還有其他的選擇來解決這個問題。如果它只是IE6，我們將編寫它修復在一個單獨的樣式表。 – Jacco 2010-02-25 14:15:58

你可以嘗試的一件事情是比你想要的更冗長。添加到類的名字，像這樣：

<div id="someId" class="someId-medium">hello, world</div>

或

<div id="someId" class="someId-large">hello, world</div>

，然後改變你的CSS這樣的：

#someId { 
    background-color: red; 
} 
.someId-medium { 
    width: 300px; 
} 
.someId-large { 
    width: 500px; 
}

來源

2010-02-25 15:12:14

這是備份計劃。 – Jacco 2010-02-25 15:13:16

是的，我同意;這並不理想。 – 2010-02-25 15:19:19

像一些如前所述，ID的唯一標識符，因此應僅在頁面中使用一次。通常情況下，ID將用於標記中的主要部分，如#header，#content＃footer等等，其餘部分僅使用類。

至於您的文本，將#someId更改爲.someId，然後您可以使用.large或.medium，因爲您可以將多個類應用於元素。

<div class="someId large">hello, world</div>

而且你的CSS將

.someId { background-color: #ccc; } 
.large { font-size: 50px; } 
.medium { font-size: 25px; }

而且......如果文本「你好，世界」爲標題，我強烈建議你使用正確的元素（H1，H2，等等。 ..）並調整他們的風格，而不是創建新的。

希望這會有所幫助！

編輯：對於下面的評論，這裏是一個小的HTML代碼，我剛剛在IE6中測試過，並且可以工作。它也適用於FF和Opera，所以我假設它也可以在Safari和Chrome中運行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title>An XHTML 1.0 Strict standard template</title> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
    <style type="text/css"> 
    .something { background-color: #ccc; } 
    .else { color: #090; } 
    </style> 
</head> 

<body> 

    <div class="something">This is just something</div> 
    <div class="else">This is just else</div> 
    <div class="something else">This is something else</div> 

</body> 
</html>

來源

2010-02-25 18:52:23 Karinne

這個問題是關於與規範結合的跨瀏覽器功能支持。 – Jacco 2010-02-25 22:28:04

即使在IE6中，多個類也可以工作。請參閱上面編輯的回覆 – Karinne 2010-02-26 15:15:12

結合一類選擇與ID

回答

相關問題