在這之前，我完全沒有聽說過CSS選擇器。

我了解他，是應為做了一些前端開發工作。

我希望可以使用類target,將第一個選擇元素作為目標。

如下：

HTML

<section></section>
<section class="target"></section>
<section class="target"></section>
<section class="target"></section>
<section></section>

一般來說，我會使用偽類，因此，我嘗試下面的操作：

CSS

section.target:first-of-type {}
section.target:nth-of-type(1) {}
section.target:first-child {}

出于某些原因，我一直使用這樣的方法，大那是這一次，樣式沒被應用。

去Stack Overflow上問了不少開發者，都得到了相同的問題。一位網友給出了答案：使用CSS3的選擇器，說實話，我之前真沒聽說過。

我進入了一個誤區，想使用上面的一個選項將第一個元素作為目標。

使用普通相鄰選擇符

使用普通相鄰選擇符是分開兩個序列的簡單的選擇器，由"波浪"字符(U+007E, ~)組成

兩個序列的元素在文檔樹中共享相同父文檔，被第一個數列表現的元素（非立即）優先于第二個。

使用普通相鄰選擇符，使用類target，包括第一個我們可以將所有的部分元素作為目標。 然后我們可以使用target類 except ，除去第一個，將所有元素作為目標。在某種程度上取消了其他元素的樣式

來個例子：

HTML

<section></section>
<section class="target"></section>
<section class="target"></section>
<section class="target"></section>
<section></section>

CSS

body > section.target { border: 1px solid red; }
body > section.target ~ section.target { border: none; }

這個方法對我相當受用。你有使用過CSS普通相鄰選擇符嗎？

還有好多iPhone 6 Plus沒送出去，快來看看，趕快把他領回家！！！

【年終大促 巔峰盛"慧" 】促銷火熱進行中 iPhone 6 Plus、 iPhone 6、iPad Air等你免費拿 點我查看

慧都聯合葡萄城產品年終大惠，第二套起，買一送一！11月17日-12月31日，機會不容錯過！點我查看

FastReport VCL 5新版發布會，2014-12-9 15:00網絡直播，免費參加?