【CSS】关系选择器

最新推荐文章于 2024-04-30 16:10:14 发布

yy_bazinga

最新推荐文章于 2024-04-30 16:10:14 发布

阅读量368

点赞数

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/yy_bazinga/article/details/123366162

版权

8 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的关系选择器，包括子元素选择器、后代元素选择器、兄弟元素选择器的用法和语法。通过实例展示了如何使用这些选择器来定位和样式化页面元素，如选择父元素的特定子元素、选取后代元素以及选取相邻或后续兄弟元素。

摘要由CSDN通过智能技术生成

关系元素

直接包含子元素的元素叫做父元素。

直接被父元素包含的元素是子元素。

直接或间接包含后代元素的元素叫做祖先元素。
一个元素的父元素也是它的祖先元素。

直接或间接被祖先元素包含的元素叫做后代元素。
子元素也是后代元素。

拥有相同父元素的元素是兄弟元素。

作用：选中指定父元素的指定子元素
语法：父元素 > 子元素

/* 选择div中的子span */
div > span{
    color: red;
}
/* 选择class为box的div中的子span */
div.box > span{
    color: red;
}

作用：选中指定元素内的指定后代元素。
语法：祖先后代

/* 选择div中的后代span */
div span{
    color: red;
}

语法：前一个+下一个

/* 紧挨着p的下一个span，中间如果间隔了其他元素，则不生效 */
p + span{
    color: red;
}

语法：兄 ~ 弟

/* p后边的所有兄弟span ，p前边的兄弟span不生效*/
p ~ span{
    color: red;
}

关注

专栏目录