css中兄弟选择器怎么用-创新互联
这篇文章将为大家详细讲解有关css中兄弟选择器怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司于2013年开始,公司以成都做网站、成都网站设计、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务,适用行业近百种。服务企业客户上1000家,涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格,为不同客户提供各种风格的特色服务。主要讲解css中兄弟选择器的使用,以及+和~的区别有哪些?如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。
+选择器的使用
比如:
h2+p{
margin-top:50px;
color:red;
}
Thisisparagraph.
Thisisaheading.
Thisisparagraph.
Thisisparagraph.
效果图如下:
兄弟选择器只会影响下面的p标签的样式,不影响上面兄弟的样式。
注意这里的’+’的意义跟’and’意义不一样,兄弟选择器的样式是应用在兄弟元素上,跟参照的元素样式无关,如上例只影响p元素的样式,而不影响h2标签的样式。当然这个也会循环查找,即当两个兄弟元素相同时,会一次循环查找:
li+li{
color:red;
}
- Listitem1
- Listitem2
- Listitem3
效果如下:
Listitem1
Listitem2
Listitem3
可以看出第一个li字体颜色没有变红,第二个和第三个元素字体变红,这就是因为第三个li是第二个li的兄弟元素,所以也会应用样式。
~选择器的使用
作用是查找某一个指定元素的后面的所有兄弟结点。示例代码:
h2~p{
color:red;
}
1
2
3
4
5
关于“css中兄弟选择器怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
当前文章:css中兄弟选择器怎么用-创新互联
浏览地址:http://pwwzsj.com/article/dpcpos.html