我可以將切換CSS應用到多個元素嗎？

一般情況下，我可以申請CSS規範的多個元素，例如：我可以將切換CSS應用到多個元素嗎？

.class1, .class2, #tag1, #tag2 { 
margin: 10px; 
color: black; 
etc: etc; }

在我目前的js代碼的項目，我使用body.className開關的作用。如果className設置爲「觀看」某些事情發生在代碼的不同部分，如：

.viewing #content {padding: 0} 
.viewing #footer {display:none} 
.viewing #nav {display:none}

我的問題是是否有東西結合像.viewing #footer和viewing #nav的方式 - 是這樣的：

.viewing #footer, #nav {display:none);

來源

2017-03-22 Bewildered

是的，但你必須做的：

.viewing #footer, .viewing #nav {display:none);

來源

2017-03-22 17:04:52 dzylich

你可以做這樣的事情：

tag#id.class

或在您的情況.class#id 例如：

.my-class#my-id, .my-class#other-id

來源

2017-03-22 17:05:14 Xing

不與CSS本身，你不得不重複.viewing部分：

.viewing #footer, .viewing #nav { 
    /* Rules to apply to #footer and #nav when an 
     ancestor element (like body) has .viewing 
    */ 
}

Sass，Less，這種提供更豐富選擇機制，然後將它們編譯爲純CSS以便傳送到瀏覽器，您可以查看它們。

例如，使用薩斯的SCSS，你可以寫這樣的：

/* This is SCSS, not CSS */ 
.viewer { 
    #footer, #nav { 
     /* Rules to apply to #footer and #nav when an 
      ancestor element (like body) has .viewing 
     */ 
    } 
}

薩斯將預處理的是，輸出的CSS兼容的規則。

來源

2017-03-22 17:05:18

它們有drafted是一個用於在CSS中嵌套支持的模塊，由於它尚未被引入，所以你不能僅僅使用CSS本身來做到這一點，就像T.J.已經寫了。

即使使用像Sass和其他CSS預處理器，您也無法實現這一目標，因爲它們最終會爲您編譯CSS，如您現在所知，它不支持除Media Queries之外的嵌套。

來源

2017-03-22 18:09:56

我可以將切換CSS應用到多個元素嗎？

回答

相關問題