前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS组合选择符

CSS组合选择符

作者头像
白胡杨同学
发布2020-04-10 10:41:43
4550
发布2020-04-10 10:41:43
举报
文章被收录于专栏:白胡杨同学
什么是组合选择符?
代码语言:javascript
复制
组合选择符说明了两个选择器直接的关系。
CSS组合选择符有几种,都是什么?

在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以波浪号分隔)

后代选择器

后代选择器用于选取某元素的后代元素。

代码语言:javascript
复制
div p
{
  background-color:yellow;
}
子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

代码语言:javascript
复制
div>p
{
  background-color:yellow;
}
相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

代码语言:javascript
复制
div+p
{
  background-color:yellow;
}
后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

代码语言:javascript
复制
div~p
{
  background-color:yellow;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是组合选择符?
  • CSS组合选择符有几种,都是什么?
    • 后代选择器
      • 子元素选择器
        • 相邻兄弟选择器
          • 后续兄弟选择器
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档