CSS更短的查詢

比如我有一個CSS選擇器：CSS更短的查詢

#spotlightPlayer .container .commands.over span, 
#spotlightPlayer .container .commands.over ul, 
#spotlightPlayer .container .commands.over ul li { clear:both }

有沒有辦法來寫這樣，

(#spotlightPlayer .container .commands.over) span, ul, ul li { clear:both }

來源

2009-02-26 appqui-platform

-2

聽起來就像是問題是在你的文檔結構，而不是你的CSS 。你真的需要那麼長的標識符列表來獲得你需要的特異性嗎？您應該只需要HTML元素上的屬性，例如描述您所顯示的數據。

來源

2009-02-26 18:12:19

我需要所有這些 – 2009-02-26 18:13:38

如果你想要的是清理你的CSS，你不擔心你的HTML凌亂，在相關的部分應用類每個span，ul和ul>li元素。你可以清除兩行額外的CSS，但是你會在HTML cruft中獲得很多權重。我不會推薦這個。

來源

2009-02-26 18:16:23 kyle

簡單地說，有沒有這樣的可能性 – 2009-02-26 18:24:37

你可以使用某種CSS預處理器像Shaun Inman’s CSS server-side pre-processor轉換這樣的：

#spotlightPlayer .container .commands.over { 
    span, 
    ul, 
    ul li { clear:both } 
}

到這一點：

#spotlightPlayer .container .commands.over span, 
#spotlightPlayer .container .commands.over ul, 
#spotlightPlayer .container .commands.over ul li { clear:both }

但CSS本身沒有這樣的語法。

來源

2009-02-26 18:22:45 Gumbo

那麼你實際上想要的是'with'/ grouping結構？

我不認爲CSS可以直接做到這一點，但它肯定會有用。

編寫一個從速記中生成長手版本的基本腳本可能不會太困難。

不過，或許是一個更一致的語法是：

@with(#spotlightPlayer .container .commands.over) 
{ 
    span, ul, ul li { clear:both } 
}

雖然在這種情況下更長的時間，這將允許您添加應用只能在特定塊多樣式。

編輯：或更好，然後與其他答案中提出的CSS預處理器去。

此外，關於傑里米的答案/評論：除非你有（或計劃擁有）一個.commands.over項目的.container項目之外，那麼你可以刪除中間部分。

當您對選擇器進行空格分隔時，它允許任何後代，而不需要直接的父/子關係（如>）。

來源

2009-02-26 18:34:28

是啊，從來沒有聽說過這樣的預處理的事情，幻想在上升 - 如果這樣的事情可以處理所有的CSS黑客瀏覽器，像meta css語言。 – 2009-02-26 19:11:18

您可能會收到Sass。它有很多有用的小功能，可以讓你的樣式表比普通的CSS語法更具聲明性。它以非常自然的方式處理深度嵌套標籤。在薩斯，這將是：

#spotlightPlayer .container. commands.over 
    span, ul, ul li 
    :clear both

來源

2009-02-26 19:04:37 Chuck

對不起，我的大腦不適合哈姆風格，我更喜歡css風格 – 2009-02-27 08:41:08

CSS更短的查詢

回答

相關問題