如何在css中選擇多個類？

是否有任何簡短的方法來選擇所有這些東西只使用一次ID #load？如何在css中選擇多個類？

#load p, 
#load h1, 
#load h2, 
#load h3, 
#load h4, 
#load h5, 
#load h6 { 
    font-size: 80%; 
    margin:2%; 
}

來源

2017-02-13 Damian Toczek

-1

不除非你想要的一切。你可以通過#load *獲得一切。

來源

2017-02-13 01:00:17

，如果他們總是要的#load直接孩子，你可以做

#load > * { 
    font-size: 80%; 
    margin: 2%; 
}

，但請記住，這些規則將適用於#load

任何直接的孩子，否則你也可以選擇給這些所有的一類，像load-child例如

#load .load-child { 
    font-size: 80%; 
    margin: 2%; 
}

來源

2017-02-13 01:00:46 dargue3

在CSS某些屬性繼承噸他封裝html元素的屬性（除非手動覆蓋）。因此，這意味着，你可以簡單地做：

#load { 
 
    font-size: 40px; 
 
    margin: 2%; 
 
}

<div id=load> 
 
    <p>hello from p</p> 
 
    <h3>hello form h3</h3> 
 
</div>

正如你可以看到herefont-size在默認情況下繼承的財產。（這個參考是CSS2--我找不到CSS3的任何地方？）

所以這意味着需要css現在封裝其子h和p元素。

注意我只是在示例中放置了40px的可見性。

https://www.w3.org/wiki/Inheritance_and_cascade是一個很好的元素繼承快速閱讀，但總結;

繼承允許我們在高級元素上聲明屬性，並允許這些屬性逐漸下降到所有後代元素。默認情況下，只有一些屬性被繼承，但可以通過inherit關鍵字強制繼承。

來源

2017-02-13 01:07:19 Zze

您可以在類隨時添加的元素：

<h1 class="myclass"></h1> 
<h2 class="myclass"></h2> 
etc... 

And then select them all with that class: 

#load .myclass { 
    font-size: 80%; 
    margin:2%; 
}

如果使用SASS（或任何CSS預處理器），那麼它會是這個樣子：

#load { 
    p, h1, h2, h3, h4, h5, h6 { 
    font-size: 80%; 
    margin: 2%; 
    } 
}

SASS需要在在服務器上停滯，然後將代碼編譯爲純CSS。結果將與您在問題中發佈的內容相同。

而且，我加入這個作爲一個選項，
存在匹配 CSS選擇器：

#load :-moz-any(p, h1, h2, h3, h4, h5, h6) { /* firefox 4+*/ 
    font-size: 80%; 
    margin:2%; 
} 

#load :-webkit-any(p, h1, h2, h3, h4, h5, h6) { /* chrome 15+, safari 5+, opera 15+ */ 
    font-size: 80%; 
    margin:2%; 
}

沒有爲matching selector通過IE不支持/ Edge

來源

2017-02-13 01:49:21 pol

SASS代碼不適合我。我需要一個CSS文件或sass？ –

@DamianToczek這是一個預處理器，您需要將其安裝在服務器上。該代碼然後編譯爲純CSS。完成後，結果將與您在問題中發佈的代碼相同。 - 如果你不能安裝它，那麼最好的辦法是將一個類添加到你想添加它的所有元素。 - IE/Edge不支持匹配的選擇器。 - 我在答案中添加了這個信息。 – pol

使用這個類會比這個css：75頭更多的字母。 –

如何在css中選擇多個類？

回答

相關問題