奇怪我寫的 CSS 怎麼沒效⋯？
（看了一眼 HTML 結構）你要選的那個 span 是孫子，不是兒子。
什麼孫子兒子？有差嗎？
差得可多了！空格、波浪、加號、大於，每個符號代表不同元素之間的關係。選錯關係，CSS 當然沒效。
空格：後代選擇器
假設 HTML & CSS 如下，哪些字母的背景會變亮綠色？
html
<div>
<span>
A
<span>
B
<span> C </span>
</span>
</span>
</div>
<span>D</span>
/* --- css --- */
<style>
div span {
background-color: lightgreen;
}
</style>A、B、C 背景會變色，D 不會。
空格代表後代。左邊選出祖先，右邊選出住在裡面的指定後代，不管幾代都算。D 沒被包在 <div> 裡，不符合條件。
波浪：一般兄弟姊妹選擇器
假設 HTML & CSS 如下，這次會是哪幾個字母的背景變金色？
html
<span>A</span>
<span>B</span>
<strong>C</strong>
<span>D</span>
<p>E</p>
<span>F</span>
/* --- css --- */
<style>
strong ~ span {
background-color: gold;
}
</style>D、F 背景會變色，其他都不會。
波浪找的是之後的兄弟姊妹。A、B 排在 <strong> 前面，不算。D 跟 F 中間夾了 <p> 沒關係，波浪不要求緊鄰。
加號：緊鄰兄弟姊妹選擇器
假設 HTML & CSS 如下，這次又會是哪個字母的背景變鮭魚色？
html
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
/* --- css --- */
<style>
li:first-of-type + li {
background-color: salmon;
}
</style>只有 B 的背景會變色。
加號找的是緊鄰的下一個兄弟姊妹，只選一個。這個是四個裡最容易被自己直覺誤導的，記住它代表緊鄰就好。
大於：子代選擇器
假設 HTML & CSS 如下，哪些字母的背景會變水色？
html
<div>
<span>A</span>
<p>
B
<span>C</span>
</p>
<span>D</span>
</div>
<span>E</span>
/* --- css --- */
<style>
div > span {
background-color: aqua;
}
</style>A、D 會變色。C 是孫輩，E 是路人，都不符合。
大於只找指定的兒子 / 女兒們，跟空格相比，較嚴格。
總結
附上 CodePen CSS - Combinators | Yuki 可以玩看看。
四個 combinator 可以混搭著用，宛如 combo 技：nav > .nav-menu #mobile-nav-switch:checked ~ label > span:nth-child(1) 。不過組合越複雜，可讀性就越差、越難維護，斟酌使用吧。
加映：惡魔柚子可能寫錯了什麼？
假設 HTML 如下：
html
<div>
<p>
<span>A</span>
</p>
</div>惡魔柚子可能寫了這樣的 CSS：
css
div > span {
background-color: silver;
}<span> 和 <div> 中間夾了一層 <p>，所以 > 選不到它，就沒效了。
修正方式有兩種：
css
/* 指定完整路徑 */
div > p > span {
background-color: silver;
}
/* 或直接用後代選擇器 */
div span {
background-color: silver;
}