学习css3笔记——相邻兄弟选择器"+"

这个故事发生在某天，到华南植物园周边喝完早茶回公司，上网收集有趣的文字，整理修订多年前写好的《JavaScript》教程，并创作汉语SEO要用的《CSS语言》教程，存起来以后当文化传播作品使用。

一边整理《JavaScript》教程,一边在网上和女粉丝侃大山，突然间，一个说自已是从海南文昌来广州学现代汉语的女粉丝问：“陈老师，最近文化传播教程又打算教点什么新东西？”，我问：“你们都想学啥？”，女粉丝说：“陈老师！我想知道相邻兄弟选择器"+"用法。“下面就给大家讲下。

控制同一个父元素下的相邻子元素，我们就要用相邻兄弟选择器，元素与元素中间用“+”连起来，如语法1。

相领子元素选择器+相领子元素选择器
｛
属性名：属性值;
｝

控制同一个父元素下的h4元素后面相邻的div元素字体变粉红色。元素间用“+”加号连接，如css语言1。

h4+div
{
color:#f17c67;
}

控制同一个父元素下h4元素后面第4个div元素字体变粉红色，元素间用“+”加号连接，如css语言2。

h4+div+div+div+div
{
color:#f17c67;
}

设计h4元素和4个div元素配合试验用，内容为"微信公众号：design-Rabbit",如html语言1

微信公众号：design-Rabbit
微信公众号：design-Rabbit
微信公众号：design-Rabbit
微信公众号：design-Rabbit
微信公众号：design-Rabbit
微信公众号：design-Rabbit

css语言1和css语言2和html语言1,移植或嵌入html5基础框架中，如综合代码1.

微信公众号：design-Rabbit
微信公众号：design-Rabbit
微信公众号：design-Rabbit
微信公众号：design-Rabbit
微信公众号：design-Rabbit
微信公众号：design-Rabbit

运行综合代码1，就可以看到图1的效果，如果还不会运行方法，可以看我以前写的Html5，学习代码运行方法。

注：看到图1页面中字体显示乱马时charset="GB2312"可以改成charset="utf-8"或改为其它的编码方式。有的浏览器会阻止脚本运行，这时请大家换下浏览器例如用IE浏览器或看下防火墙或看下杀毒软件有没报错。

图1

通过综合代码1和图1对比，可以看出以h4元素为起点第1个div元素和第4个div元素中字体变成粉红色，效果如图1，我们的试验就成功了。

好！杰哥CSS3学习笔记分享到这里，要知后事如何请关注我，如果喜欢请打赏。