理論上每個 Element 都可以設定獨立 Class 加以選取，若想在不增加 Class 前提下選取下一個 Element，可使用 + 加以選取。
Version
CSS 3
Adjacent Sibiling Combinator
Web Tech 已經有 .title，在不想增加 class 前提下想將 HTML 改成紅色。
<template>
<h1 class="title">Web Tech</h1>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</template>
<style scoped>
.title + p {
color: #f00;
}
</style>
第 2 行
<h1 class="title">Web Tech</h1>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
Web Tech 有 .title，但 HTML 沒有任何 class。
第 9 行
.title + p {
color: #f00;
}
使用 + 選取 .title 下一個 <p>，因此可選到 HTML 加以改變顏色。
Not Select First li
第二個 <li> 與第三個 <li> 的 iPhone 與 iPad 改成紅色。
<template>
<ul>
<li>Macbook</li>
<li>iPhone</li>
<li>iPad</li>
</ul>
</template>
<style scoped>
li + li {
color: #f00;
}
</style>
10 行
li + li {
color: #f00;
}
li + li：選取每個<li>之後的<li>，因此第一個<li>不被選取
Vertical Line
想在每個 item 間加入水平分隔線，但第一筆之前與最後一筆之後都沒有分隔線。
<template>
<ul>
<li>Macbook</li>
<li>iPhone</li>
<li>iPad</li>
</ul>
</template>
<style scoped>
li + li {
border-top: 1px solid #f00;
}
</style>
10 行
li + li {
border-top: 1px solid #f00;
}
li + li：一樣使用此技巧選取所有<li>，但不包含第一筆，設定每筆的 top border
Horizontal Line
舉一反三也可用在水平方向。
<template>
<ul>
<li>Macbook</li>
<li>iPhone</li>
<li>iPad</li>
</ul>
</template>
<style scoped>
li {
display: inline-block;
padding: 3px;
}
li + li {
border-left: 1px solid #f00;
}
</style>
10 行
li {
display: inline-block;
padding: 3px;
}
設定 <li> style：
display: inline-block：使<li>改成水平顯示padding: 3px：設定<li>之間 padding
15 行
li + li {
border-left: 1px solid #f00;
}
li + li：一樣使用此技巧選取所有<li>，但不包含第一筆，設定每筆的 left border
Conclusion
- 善用
+可減少不必要的 class li + li為<li>常用 pattern，可讓我們不選擇第一筆