彩票走势图

怎样有效使用CSS普通相邻选择符

原创|使用教程|编辑:龚雪|2014-11-18 09:54:15.000|阅读 470 次

概述:我是怎样从实践工作中有效使用CSS普通相邻选择符( General sibling combinator)?今天,我就来谈谈对于CSS普通相邻选择符的使用过程。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

在这之前,我完全没有听说过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普通相邻选择符吗?

使用CSS选择符

还有好多iPhone 6 Plus没送出去,快来看看,赶快把他领回家!!!


【年终大促 巅峰盛"慧" 】促销火热进行中 iPhone 6 Plus、 iPhone 6、iPad Air等你免费拿 点我查看

慧都联合葡萄城产品年终大惠,第二套起,买一送一!11月17日-12月31日,机会不容错过!点我查看

FastReport VCL 5新版发布会,2014-12-9 15:00网络直播,免费参加 


标签:CSS3

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP