若遇到 CSS 相同部分，我們會抽出相同 Class 共用，對於不同部分，可使用 Compound Selector 加以選擇。
Version
CSS 3
Button
<button>、<a> 與 <input> 三個 tag 都可實作 button，若不使用 CSS 描述，三者看起來不一樣。
<template>
<button>Button</button>
<a>Button</a>
<input type="button" value="Button">
</template>
同時使用 <button>、<a> 與 <input> 實作 button。
Common Class
<button>、<a> 與 <input> 三個 button 看起來完全相同。
<template>
<button class="btn">Button</button>
<a class="btn">Button</a>
<input type="button" class="btn" value="Button">
</template>
<style scoped>
.btn {
border: 1px solid #aaa;
background-color: #eee;
padding: 0.2em;
margin: 5px;
font: 400 13px Arial;
}
</style>
第 8 行
.btn {
border: 1px solid #aaa;
background-color: #eee;
padding: 0.2em;
margin: 5px;
font: 400 13px Arial;
}
將 <button>、<a> 與 <input> 三者相同部分抽成 .btn。
第 2 行
<button class="btn">Button</button>
<a class="btn">Button</a>
<input type="button" class="btn" value="Button">
<button>、<a> 與 <input> 都套用相同的 .btn 。
由此可發現僅管 HTML 不同，但只要 CSS 描述相同，最終視覺效果相同
Unique Class
將中間 button 的 border 改為 紅色。
<template>
<button class="btn">Button</button>
<a class="btn red">Button</a>
<input type="button" class="btn" value="Button">
</template>
<style scoped>
.btn {
border: 1px solid #aaa;
background-color: #eee;
padding: 0.2em;
margin: 5px;
font: 400 13px Arial;
}
.red {
border-color: #f00;
}
</style>
16 行
.red {
border-color: #f00;
}
若以 FP 觀念思考，單獨建立 .red c設定 border-color: red。
第 2 行
<button class="btn">Button</button>
<a class="btn red">Button</a>
<input type="button" class="btn" value="Button">
<a> 除了套用 .btn 外，還另外套用了 .red，就可讀性而言可輕易得知 <a> 是 紅色的 button。
Compound Selector
中間 button 的 border 依然為 紅色，但改為 compound selector。
<template>
<button class="btn">Button</button>
<a class="btn">Button</a>
<input type="button" class="btn" value="Button">
</template>
<style scoped>
.btn {
border: 1px solid #aaa;
background-color: #eee;
padding: 0.2em;
margin: 5px;
font: 400 13px Arial;
}
a.btn {
border-color: #f00;
}
</style>
16 行
a.btn {
border-color: #f00;
}
CSS 另外提供一種更非侵入式方式，由於第二個 button 為 <a>，可直接組合 a 與 .btn 成為 compound selector，表示選擇 <a> 與 btn class，如此 HTML 完全不用修改。
Conclusion
- Compound selector 為 CSS 獨門概念，可以非侵入式選擇不同部分，而不需修改 HTML
- Compound selector 特別適合當相同 class 指定到不同 element 時，透過 element 與 class 的 compound 指定不同的 style