css中兄弟选择器怎么用

这篇文章将为大家详细讲解有关css中兄弟选择器怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

　　主要讲解css中兄弟选择器的使用，以及+和~的区别有哪些？如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

　　+选择器的使用

　　比如：

　　<styletype="text/css">

　　h2+p{

　　margin-top:50px;

　　color:red;

　　}

　　</style>

　　<p>Thisisparagraph.</p>

　　<h2>Thisisaheading.</h2>

　　<p>Thisisparagraph.</p>

　　<p>Thisisparagraph.</p>

　　效果图如下：

　　兄弟选择器只会影响下面的p标签的样式，不影响上面兄弟的样式。

　　注意这里的’+’的意义跟’and’意义不一样，兄弟选择器的样式是应用在兄弟元素上，跟参照的元素样式无关，如上例只影响p元素的样式，而不影响h2标签的样式。当然这个也会循环查找，即当两个兄弟元素相同时，会一次循环查找：

　　<styletype="text/css">

　　li+li{

　　color:red;

　　}

　　</style>

　　<div>

　　<ul>

　　<li>Listitem1</li>

　　<li>Listitem2</li>

　　<li>Listitem3</li>

　　</ul>

　　</div>

　　效果如下：

　　Listitem1

　　Listitem2

　　Listitem3

　　可以看出第一个li字体颜色没有变红，第二个和第三个元素字体变红，这就是因为第三个li是第二个li的兄弟元素，所以也会应用样式。

　　~选择器的使用

　　作用是查找某一个指定元素的后面的所有兄弟结点。示例代码：

　　<styletype="text/css">

　　h2~p{

　　color:red;

　　}

　　</style>

　　<p>1</p>

　　<h2>2</h2>

　　<p>3</p>

　　<p>4</p>

　　<p>5</p>

关于“css中兄弟选择器怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。