CSS語法選擇一個類下的多個元素

HTML：CSS語法選擇一個類下的多個元素

<div class="home"> 
<div class="a"> 
    A content 
</div> 
<div class="b"> 
    B content 
</div> 
<div class="c"> 
    C content 
</div> 
<div class="d"> 
    D content 
</div> 
<div class="e"> 
    E content 
</div> 
</div>

申請普通樣式A，C和E歲以下兒童家庭類，我們可以使用多個CSS選擇器下面寫的。

CSS：

.home .a,.home .c,.home .e{ 
background-color:#ccc; 
}

問：什麼是上述CSS的較短的版本？

現在作爲一個c和e是家常見的孩子。我不是一次又一次重複.home如何編寫一個較短的語法來選擇家庭課下的a，b和c類。

也許是這樣的：

.home(.a,.c,.e){ 
color:#ccc; 
}

我知道這是錯的，但只是給我的問題在這裏，我要尋找一個清晰的概念。

來源

2015-07-21 Kiran Dash

我編輯了我的問題，使其更加清晰。我只需要一個div下的一組特定的類。 –

'a'，'c'和'e'只是一個隨機的例子，或者您需要專門針對這些div？ – fcalderan

代碼.home(.a,.c,.e)將無法正常工作，並沒有OR運營商CSS選擇器。 home .a,.home .c,.home .e是最短的路。

但這裏的幾個選擇，可以幫助你：

.home div { } /* all divs in home */ 
.home > div { } /* all divs that are a direct child of .home */ 
.home * { } /* all elements in .home */ 
.home > * { } /* all direct children of .home */

也存在CSS預處理器，就像SASS和LESS，給你更多的可能性。

來源

2015-07-21 11:35:02 LinkinTED

使用子選擇器'>'。

CSS：

.home > div { 
    color: #ccc; 
}

來源

2015-07-21 11:33:40

div與a類，c和e可使用:nth-child僞類

.home > div:nth-child(2n + 1) { 
    background-color:#ccc; 
}

與所述給定標記這個被選擇相當於

.home .a, .home .c, .home .e{ 
    background-color:#ccc; 
}

Codepen實施例：http://codepen.io/anon/pen/XbPNPw

來源

2015-07-21 11:39:14 fcalderan

如果想要提及expli類的名字（例如） a, b, c），但不希望重複您的源CSS，也許這是好主意，開始使用一些CSS預處理器，如Sass或less。例如，與薩斯您可以在.scss這個文件寫：

.home { 
    .a, .c, .e { 
     background-color:#ccc; 
    } 
}

在輸出薩斯將編譯它的.css文件：

.home .a, .home .c, .home .e{ 
    background-color:#ccc; 
}

這將讓你的源文件乾淨。

來源

2015-07-21 11:42:13 alynioke

在當前的CSS中，沒有這樣的語法。

CSS選擇4 has :matches pseudo-class，將能夠做這樣的分組：

.home:matches(.a,.c,.e){ 
color:#ccc; 
}

不幸的是，它不是由瀏覽器支持呢。基於Gecko和WebKit/Blink的瀏覽器分別實現了一箇舊草案:-moz-any()和-webkit-any()，但是您必須兩次編寫選擇器才能使其在這些瀏覽器中正常工作，因此它們現在遠沒有實際用處。

但你可以用CSS預處理器來簡化你的CSS。

來源

2015-07-21 11:46:39

CSS語法選擇一個類下的多個元素

回答

相關問題