温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css中兄弟选择器怎么用

发布时间:2021-09-23 09:31:30 来源:亿速云 阅读:366 作者:小新 栏目:开发技术

这篇文章将为大家详细讲解有关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中兄弟选择器怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI