1. 程式人生 > >CSS中,兩個class類之間有空格和沒空格的區別是什麼?

CSS中,兩個class類之間有空格和沒空格的區別是什麼?

CSS中定義CLASS時,中間有空格和沒空格的區別是什麼?

.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中間用空格隔開,表示後代選擇器,選擇的是.example內的.pp。
.example.pp2 則是在一個元素上,這個元素包括這兩個類才會有效果。

另外 less中表示 .example.pp2 的寫法:

.example{
    &.pp2
}.