html兄弟选择器怎么用,HTML+CSS入门 CSS选择器之兄弟选择器

本篇教程介绍了HTML+CSS入门 CSS选择器之兄弟选择器，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

先来代码说话：

(1)、‘~’选择器

html>

Document

.h3 ~ p{

color: red;

}

这是段落标签

这是段落标签

这是段落标签

这是标题标签

这是段落标签

这是段落标签

这是段落标签

这是标题标签

这是段落标签

这是段落标签

这是段落标签

效果如下：

(2)、‘+’选择器

html>

Document

.h3 + p{

color: red;

}

这是段落标签

这是段落标签

这是段落标签

这是标题标签

这是段落标签

这是段落标签

这是段落标签

这是标题标签

这是段落标签

这是段落标签

这是段落标签

代码还是那些，只是把‘~’换成了‘+’，结果是大不相同。

通过这两个例子，可以发现虽然这两个选择器都表示兄弟选择器，但是‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！