具有多個標識符的CSS類定義

我剛剛開始學習CSS，並遇到了一個我並未完全理解的示例。我無法很好地描述它，因爲找到了答案很困難（因此，如果我已經忽略了一個答案，我很抱歉）。具有多個標識符的CSS類定義

我的問題是關於下面的例子：

.theme-light.slider-wrapper { 
    background: #fff; 
    padding: 10px; 
}

據我所知，在CSS類使用.name語法，然後可以在代碼中使用像這樣定義的：

<div class="name"></div>

我做不明白「雙」聲明如何工作，以及如何在標籤中使用這種聲明。

在相關說明中，我給出的示例網站在樣式表中不存在的標籤中使用了一個ID ..在哪裏可以定義？

來源

2012-11-18 Raj

如果你想看看它是如何工作的http://jsfiddle.net/MUc4T/之前 –

的部分{稱爲「選擇」選擇器可以用許多不同的方式進行定義和組合。本網站可能會幫助您更好地理解可能性。 http://www.w3schools.com/cssref/css_selectors.asp –

中引用這也許使用例子搞清楚了您。

想象下面的情景。

你必須：

<div class="general-div">some stuff</div> 
<div class="general-div special">some stuff</div> 
<div class="general-div">some stuff</div> 
<div class="extra-div">some stuff</div> 
<div class="extra-div special">some stuff</div>

而且可以說你想要的div具有相同的屬性如下：

.general-div {width: 300px; height: 300px; border: 1px solid #000;} 

.extra-div {width: 200px; height: 200px; border: 1px solid #666;}

但是你想要的。一般，分度。特別類有紅色背景以及帶特殊類的extra-div，以獲得藍色背景。

你可以寫成：

.general-div.special {background-color: red;} 

.extra-div.special {background-color: blue;}

希望它清除了有問題的使用情況。

來源

2012-11-18 21:20:28

清晰的例子來支持你的解釋，謝謝。 – Raj

很高興能幫到你。 –

謝謝，沒有意識到在期間後我沒有空格 – sobelito

，你必須使用

<div class="class1 class2">

到多個類應用於對象。

來源

2012-11-18 21:20:17 Victor

.theme-light.slider-wrapper只是說它有兩個類。在HTML它可能看起來像這樣：

<div class="theme-light slider-wrapper"></div>

至於ID，沒有理由，在HTML的ID應該在CSS

來源

2012-11-18 21:20:18

在與.className選擇器的CSS中，您可以爲每個具有「className」類的元素定義屬性。每個元素可以有更多的類。與多個類別選擇的意義取決於你如何在你的聲明將它們組合起來：

.class1.class2僅匹配已定義他們兩個類的元素。

.class1.class2 { background: red; } 
<div class="class1 class2"></div>

.class1, .class2將匹配元素。的Class1或.class2

.class1, .class2 { background: yellow; } 
<div class="class1"></div> 
<div class="class2"></div>

.class1 .class2將匹配只與等級2用的Class1元素中的元素。

.class1 .class2 { background: blue; } 
<div class="class1"> 
    <div class="class2"></div> 
</div>

來源

2012-11-18 21:32:46 dieguitoweb

應該是'.class1，.class2 {background：yellow; }在上面的例子中，但不能編輯，因爲<6個字符。 – maxheld

@maxheld正確，謝謝;） – dieguitoweb

如何使用雙類，像<div class="name1 name2"></div>？

您div必須等級name1和name2（see live demo）。

什麼.theme-light.slider-wrapper？

這意味着您的元素必須同時具有theme-light和slide-wrapper類（see live demo）。

這對更多的元素是有益的。你想要一些元素有灰色背景。沒問題！加入他們gray類，並定義CSS：

.gray { 
    background: #ddd; 
}

還需要一些元素有紅色文字。 Define red-text class with css：

.red-text { 
    color: red; 
}

而你的段落結尾有灰色背景和紅色文字。只需添加gray和red-text類似這樣的<p class="gray red-text">Lorem ipsum</p>。

來源

2012-11-18 21:38:04

下面是你的問題的詳細解釋。

來源： www.itsmesharath.in

來源

2016-01-03 07:42:06 Sharath

具有多個標識符的CSS類定義

回答

相關問題