簡單的CSS技巧 - 有可能嗎？

我在想這是否可能：我有一個id在這種形式的CSS中定義。簡單的CSS技巧 - 有可能嗎？

#close{ 
    font-size:11px; 
    text-decoration: underline; 
} 

#close:hover{ 
    cursor: pointer; 
}

但這裏我要重複這個ID的定義，只是爲了添加hover事件。有沒有可能做這樣的事情？

#close{ 
    font-size:11px; 
    text-decoration: underline; 
}:hover{cursor: pointer;}

這將節省一些額外的輸入..

來源

2013-03-28 doniyor

你不能在CSS中做到這一點，但是你會發現CSS preprocessers像SASS或LESS有趣。它們允許你選擇旁邊，看到這個例子中SASS：

.some-div { 
    #close { 
     font-size:11px; 
     text-decoration: underline; 

     &:hover { 
      cursor: pointer; 
     } 
    } 
}

這編譯爲：

.some-div #close { 
    font-size:11px; 
    text-decoration: underline; 
} 
.some-div #close:hover { 
    cursor: pointer; 
}

注意，這些不被瀏覽器支持，你的程序編譯它們用於輸出CSS包含在您的網頁中。

來源

2013-03-28 05:09:39

與這種屬性的CSS將是偉大的！但SASS有點繁瑣的導入到頁面中。 – doniyor 2013-03-28 05:14:04

@ doniyor在這種情況下沒有其他選擇。我建議使用文件系統監視器來自動將.scss文件轉換爲.css文件（查看LiveReload：http：//livereload.com/），或者使用IDE編譯時的插件保存。有很多可用於Visual Studio的。 – 2013-03-28 05:24:07

我使用Mindscape WebWorkbench for Visual Studio，它效果很好。使CSS寫得如此愉快:)爲你的IDE尋找插件，我相信有一堆。 – 2013-03-28 05:24:56

很好，在這種特殊情況下，你可以只是

#close{ 
    font-size:11px; 
    text-decoration: underline; 
    cursor: pointer; 
}

隨着指針顯示只有當你徘徊反正;）

否則，我不相信有任何語法技巧，但你可以使用像SASS

預編譯器

來源

2013-03-28 05:10:59 Mupps

是的，我可以這樣做，但我的情況只是一個示例，如果你想在''hover''上做更多的事情......我希望，人們正在研究這一點。 :( – doniyor 2013-03-28 05:15:23

我覺得你的痛苦SASS是好的，如果你有大型項目 - 但我經常有小項目不保證它，這將是一個很好的語法，像你提到的^ – Mupps 2013-03-28 05:17:21

關於指針！是的，雙關語是打算哈哈 – galdikas 2013-03-28 05:42:15

沒有人在做這個在W3C CSS工作組，據我可以告訴（*）

有是：

預處理器（見其他答案），
存在的複製粘貼，
也許一個CSS ZenCoding /埃米特插件（從來沒有聽說過它，雖然它不是需要作爲嚴重的埃米特是HTML ），
也許像宏「去我的CSS文件的最後一行復制了{在其結束和前行，如果他們用逗號結束」
並且有方法一樣OOCSS，BEM，等等保持嵌套選擇的需求下降到1級或2級，這僅僅是假點和不時第二類（幾乎沒有ID，使用剛剛類）

（*），它幾乎沒有必要在瀏覽器imo。在CSS中我可以想到的是類，:matches() (previously known as :-vendor-any())和繼承，初始值，「變量」和一個新的all屬性（所有這些事情只與他們避免更長的任務相關，它與你的問題非常無關;））

來源

2013-03-28 05:35:32 FelipeAls

簡單的CSS技巧 - 有可能嗎？

回答

相關問題