CSS問題，這個搜索很難查到 .shadows-task的class後面怎麼跟著.task。還有「>"是什麼意思？

.shadows-task.task:hover &> .good-job {
}


---

1 .a.b{} 中間沒有空格的是多個 Class 選擇器的複合寫法，表示 HTML 標籤中的 Class 至少包含了 a 和b，class 之間的順序不限。

&test&

以下選擇器都會使上面的文字變成紅色。

.a.b{
color: red;
}

.b.a{
color: red;
}

.a.b.c{
color: red;
}

.c.b.a{
color: red;
}

/* 不推薦這樣的寫法，除非你明確需要增加該選擇器的權重（優先順序） */
div.a.b{
color: red;
}


但是，.a.b.e 則不能選擇到上面的 div。

2 .a .b{} 中間有空格的是後代選擇器，也就是說 .b 並不一定是 .a 的子元素

3 .a &> .b{} 是子選擇器，表示.b 是.a 的子元素。中間的空格可以不要，但為了代碼易讀推薦加上空格。

&
&
&& &

&
&
&
&& & &

以上兩種情況 .a .b 都可以選擇到 .b 元素。

但是 &> 是子選擇器，只匹配子元素，所以 .a &> .b 只能匹配第一種情況。

還是發個規範文檔吧：http://dev.w3.org/csswg/selectors/#class-html

---

• 【.shadows-task.task】 .shadows-task 後緊跟 .task 可以理解為有 shadows-task 且有 task 兩個類名的元素

• 【&>】 是css選擇符的一種，意思是子選擇符

推薦你一個平時我自己看的css手冊吧，裡面解釋的很詳細：CSS參考手冊_web前端開發參考手冊系列

---

都是基礎的CSS選擇器相關知識，搜索時應該找選擇器語法、偽類及子元素選擇器這類的知識，建議打好基礎，而不是直接問具體問題。

.aClass.bClass語法指的是同時擁有aClass與bClass的元素，而">"是子元素選擇器。

整句代碼指的是同時擁有 shadows-task 和 task 這兩個class的頁面DOM節點，在滑鼠懸浮的情況下(:hover)，他的子節點裡（&>），有good-job的class的DOM節點的樣式。

具體看這些內容：CSS 類選擇器詳解，CSS 偽類，CSS 子元素選擇器

---

大概還原下 DOM 結構：

&
&
&
&& &

Q1: .shadows-task的class後面怎麼跟著.task？

A: .a.b 選擇器選取的是同時具有 a b 兩個 class 的元素

Q2: ">"是什麼意思

A: elem &> elem 選擇器選擇的是父元素的直接子元素，參考CSS element&>element 選擇器

---

推薦閱讀：