半岛权威十大直营(官方)网站

在这之前，我完全没有听说过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网络直播，免费参加