.class .class css中相同的classname選擇器

任何人都可以解釋我下面的CSS做什麼？.class .class css中相同的classname選擇器

.validate-error .validate-error { 
    color: #cc2424; 
    display: inline-block; 
    margin-top: 5px; 
} 
.make-switch + .validate-error { 
    margin-left: 10px; 
}

在第一個CSS我看到same class name使用兩次？這個CSS有效嗎？我碰到這個線程 What is the difference between the selectors ".class.class" and ".class .class"? 但是不確定它是否適用，如果我們使用相同的類名兩次？

來源

2014-09-01 Mathew

。名稱。沒有空格的名稱將表示同一元素上的兩個類名（例如，div class =「name name」）。而.name .name（兩者之間有一個空格）表示一個兄弟姐妹（例如div class =「name」和該class的同級別=「name」）..你可以在這裏瞭解更多關於各種CSS選擇器還有其他幾種可能的變體）：http://www.sitepoint.com/web-foundations/css-selectors/ – davidcondrey 2014-09-02 08:40:30

第一個樣式的子元素/後代具有相同的類名：

<div class="validate-error"> 
    This color may be different from #cc2424 
    <div class="validate-error">Has color #cc2424</div> 
</div>

這意味着：該樣式應用於/覆蓋具有相同的類名稱的子元素。

第二種樣式兄弟姐妹：

<div class="make-switch"></div> 
<div class="validate-error">Has left margin</div> 
<div class="validate-error">Has no left margin</div>

這意味着：只有當.make-switch後跟.validate-error的樣式應用於.validate-error。

演示

Try before buy

來源

2014-09-01 13:15:35 insertusernamehere

是的，它是有效的。 CSS中沒有規則防止類名在複雜選擇器中多次出現。 HTML中沒有任何規則可以防止兩個元素共享一個類的成員資格，其中一個元素是另一個元素的後代。

來源

2014-09-01 13:12:09 Quentin

Id只應該是唯一的，但我們可以多次使用classname。

來源

2014-09-01 13:14:41

當選擇器部件粘在一起而沒有空白時，這意味着它應該都匹配相同的元素。

例如：當在它們之間存在的空白您選擇具有other-class作爲一類，並具有與所述一個parent element的元件（應只匹配同時具有validate-error和other-class如類的元素）

.validate-error.other-class

validate-error類

在你的第二個選擇的+實際上意味着你不想要的make-switch一個孩子，但你想要的sibling元素，但只有當它具有類個

來源

2014-09-01 13:14:54

.validate-error .validate-error { 
    ... 
}

這個CSS針對一類.validate-error那就是.validate-error後裔。

例如

<div class="validate-error"> 
    <div class="validate-error"> 
    </div> 
</div>

下一頁CSS針對該類.validate-error當它旁邊.make-switch

.make-switch + .validate-error { 
    ... 
}

來源

2014-09-01 13:16:20 TeeDeJee

.class .class css中相同的classname選擇器

回答

相關問題