在css定義CLASS時中間有空格和沒空格的區別?

來源:互聯網
上載者:User
.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的樣式權重計算有一套規則,權重大的才是最終表示的樣式,所以有些時候為了能夠覆蓋掉之前的樣式我們通過增加一個類別選取器表示這個元素來增加權重

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.