2011-03-17 127 views
4

我很好奇,如果有一個稍快的方法來實現這一點。有沒有簡單的方法來實現這與CSS?

例如說我有以下的CSS:

#main_login input[type=text], #main_login input[type=password] { 

} 

有一個更快的方法?有時候我可能會有更多的聲明行,即

#main_login blah, #main_login meh, #main_login getting_long, #main_login super_long { 

} 

這就是很多#main_login重複。我見過一些先進的CSS'ers使用asterix等,但還沒有探索這種事情。我想有更好的方式去做我正在做的事情。

任何指針?

+1

非常好的問題,我想也知道這一點。 – 2011-03-17 22:49:51

+4

不可以。不使用另一種編譯/生成爲純CSS的語法。 – 2011-03-17 22:52:47

+1

我使用PHP來生成我的CSS時,它開始變得乏味和困惑,通過。變量特別好。 – Sam 2011-03-17 23:06:36

回答

2

只有這樣,我知道的是使用像LESS

#main_login { 
    input[type=text] { 
    } 

    input[type=password] { 
    } 
} 
+0

少看起來棒極了!感謝這一點。 – willdanceforfun 2011-03-18 00:24:15

-1

你可以有一個包裝類或ID

<div class="wrapper"> 
<div id="main_login"> 
... 
</div> 
</div> 

這樣定義的CSS

.wrapper { 
} 

就足夠了。或者只是定義css爲

#main_login { 
} 
+0

.......爲什麼不呢? – gok 2011-03-17 22:53:58

+0

因爲你改變你的HTML以迎合你的CSS時,它應該是相反的方式。除了最佳實踐/個人偏好討論之外,這個問題甚至沒有爲HTML添加標籤,而是專門針對[選擇器](http://www.w3.org/TR/CSS2/selector.html);) – 2011-03-17 23:01:05

+0

實際上並沒有解決他所問的問題。 – Sam 2011-03-18 00:16:57

2

不是真的,除非你使用其他技術如SASS

阿斯特里克斯*被用來針對任何元素,他們不相干的標籤 - 因此,如果只是<blah><meh><getting_long><super_long>元素出現的#main_login裏面,你可以使用類似...

#main_login * { /* property list */ } 

另一種方法可以是修改您的HTML,以便所有這些元素共享一個類屬性,然後簡單地定位該類......但是,當您改變HTML以迎合您的CSS時,它應該是相反的方式。

+0

我要引用我的消息來源,承認我從未使用過SASS,但是在[2010年4月的@Jeff Atwood的博客]上閱讀了它(http://www.codinghorror.com/blog/2010/04/whats -wrong-with-css.html) – 2011-03-17 22:58:35

1

一個偉大的方式,使你的CSS更簡潔,可讀性是使用SCSS/SASS - http://sass-lang.com/。 SCSS是CSS的超集,允許您定義變量,創建混合和嵌套定義。它需要你使用預處理器來生成最終的CSS,但是有很多可用的Web框架的插件。

以上可改寫爲:

#main_login { 
    input[type=text], input[type=password] { 
    ... 
    } 
} 
+0

很酷!喜歡嵌套的想法。謝謝 – willdanceforfun 2011-03-18 00:23:31

+0

sass看起來很棒 – willdanceforfun 2011-03-18 03:21:20

+1

我喜歡它。現在我使用SCSS,我的樣式表更具可讀性和可維護性。 – tilleryj 2011-03-18 03:40:54

2

你可以嘗試使用星號:

#main_login * 
{ 
    .... 
} 

但既然是有原因的,你不只是選擇所有的元素,你會必須使用CSS3的:not()選擇排除某些元素:

#main_login *:not(.foo, .bar,, div.exclude_me) 
{ 
    .... 
} 

你可能有BETT呃運氣只是通過創建一個新的類,並把它應用到這些元素,因爲你可以使用CSS中的多個類:

<div class="underlined big orange foobar">Foobar</div> 

我這樣做有時複雜的樣式表,因爲我可以用英語基本上寫來形容風格屬於那個元素。

+0

+1:使用':not' ...好主意!瀏覽器如何支持? – 2011-03-17 22:56:58

+0

似乎沒有任何版本的IE(IE9除外)支持它,但它幾乎適用於所有其他瀏覽器。有一些庫爲IE添加了很多CSS3選擇器:http://selectivizr.com/。 – Blender 2011-03-17 23:01:39

+0

太好了。我不知道你可以使用排除。 – willdanceforfun 2011-03-18 00:19:53

1

這一切都取決於您嘗試匹配的子元素以及是否存在與您的用例相匹配的CSS選擇器類型。

*可用於匹配的所有元素,不過它可以是作用域:

#main_login * { } 

這將匹配下#main_login所有元素。或者您可以將其範圍限定爲特定元素類型:

#main_login div { } 

這將匹配#main_login下的所有div。

這裏是一個選擇的參考CSS2:

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

CSS3增加了許多新的選擇,但不被舊的瀏覽器支持:

http://www.w3.org/TR/css3-selectors/#selectors

相關問題