2011-07-27 23 views
6

我們的生產環境正在使用與多個CSS類不兼容的自適應技術。這意味着在設計HTML時很容易忘記和使用兩個類,並且一旦它開始生產就會中斷它。使用CSS來定位任何有兩個類的元素?

我想使用CSS來突出顯示某人忘記並意外地將兩個類應用於某個元素時。

這樣的事情是我的意圖,雖然這當然是無效的。應該強調的是應用了兩個類的任何元素:

.*.* { /* not valid (I wish) */ 
    outline:2px dotted red; 
    } 

我明白,如果我知道的類這會工作,問題是我想標記任何兩類:

.classA.classB { /* not good enough */ 
    outline:2px dotted red; 
    } 

我明白我可以用JS和一個小書籤做到這一點,也許這是唯一的解決方案。如果僅用CSS就可能會更好,因爲它會自動標記所有開發人員和QA的內容。

+0

我沒看到CSS有這種類型的功能。最簡單的方法是使用jquery查找任何元素的類屬性包含空格 –

+0

我認爲JS是唯一的解決方案;爲什麼你不使用JS?你可以說? –

+0

CSS更容易添加和清除乾淨。 JS也會工作。 – SimplGy

回答

4

除去大部分誤報(如空格填充屬性值),您可以使用此選擇:

[class*=" "]:not([class^=" "]):not([class$=" "]) { 
    outline: 2px dotted red; 
} 

這仍然沒有在價值觀,如class="foo foo"過濾掉重複的課程,如所指出的Phrogz你自己的答案,但總比沒有好,我認爲這比使用空白填充的類屬性發生的可能性要小得多。

1

這不可能單獨使用CSS。

而且,如果我可以這樣說,你的生產環境是愚蠢的。沒有多個類的CSS就像一個標籤雲,每個項目只允許一個標籤。它擊敗了一些目的。修復你的生產環境,不要以這種方式濫用CSS,而不是限制你的作者正確地使用語義描述內容。

+0

我不反對。我們正在使用日本內容自適應系統讓我們的網站在Keitai移動設備上運行。沒有太多的選擇。 – SimplGy

6

我只是找到了一個可以接受的答案:

[class*=" "] { 
    outline:2px dotted red; 
    } 

這凸顯了在類屬性的空間什麼。它得到了一些誤報,因爲有時類屬性中的空格由於可讀的服務器端代碼而合法地發生,但是我更傾向於假否定。

有什麼更好的點子?

+1

還要注意(可能不太可能,因此也是可以接受的),這也會標記'class =「foo foo」'它實際上只應用了一個類。 – Phrogz