在css定義CLASS時中間有空格、沒空格的差別？-css教學-PHP中文網

在css定義CLASS時中間有空格、沒空格的差別？

黄舟

發布： 2017-07-22 09:42:04

原創

2699 人瀏覽過

.example .pp{  color: orange;
}.example.pp2 {  color: green;
}

登入後複製

如上面的兩個定義一個是中間有空格，一個是中間沒空格。

第一个class要这样写生效：<p class="example">文字文字<span class="pp">pp这个class生效</span>....</p>
第二个class要这样写生效：<p class="example pp2">pp2这个class生效</p>

登入後複製

請問，這是為什麼？？

.example .pp = E F 是後位選擇器。

.example.pp2 則是在一個元素上，這個元素包含這兩個類別才會有效果。

兩者有差別，有很大的差別！

.example .pp中間用空格隔開，表示後代選擇器，選擇的是.example內的.pp。
例如：

<div class="example">
    <div class="pp">被选择的元素</div>
</div>

登入後複製

.example.pp選擇的是class中同時包含example和pp的元素。
例如：

<div class="example pp">
被选择的元素
</div>

登入後複製

這是css選擇器的格式，規定不帶空格的選擇條件之間是“且”關係，帶空格的是“父子”關係，並且可以是非直接的“父子」關係

<style>
.e1.e2{
background-color:yellow;
}
.father .e3{
background-color:green;
}
</style>
</head>
<body>
<div class="father">
<p class="e1 e2">我住在 Duckburg。</p>
<p class="e3">我也住在 Duckburg。</p>
<div>
<p class="e3">他也住在 Duckburg。</p>
</div>
</div>
</body>

登入後複製

上面的程式碼中第一個段落p有兩個class，e1和e2，注意，class屬性的空格和css的空格不一個意思的，class屬性的空格是「且」的關係，而剛說的css的空格是「父代與後代」的關係。

第一個p被渲染為了黃色，是因為css用了.e1.e2的選擇器給他設定了這個顏色，就是這個段落同時有這兩個類別。當然，css裡面不用.e1.e2只用.e1也可以實現同樣的效果，不過有些時候我們不希望css選擇器誤命中其它的標籤，就這麼細寫了。

第二p被.father .e3渲染為了綠色，是因為這p的class是e3，而且是class為father的標籤的後代，所以被染為綠色。

同理，第三個p，雖然不是father的直接子類，但同樣變成綠色，說明這種帶有空格的選擇器可以包含間接的後代。

區別樓上已經說清楚啦，說一下為什麼有些時候需要用多個類別選擇器來選擇某個元素
1，css的中文翻譯是層疊樣式表，它的樣式是基於繼承和覆蓋來產生最終樣式的。
2，css的樣式權重計算有一套規則，權重大的才是最終表示的樣式，所以有些時候為了能夠覆蓋掉之前的樣式我們透過增加一個類別選擇器表示這個元素來增加權重

以上是在css定義CLASS時中間有空格、沒空格的差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！