首页前端开发CSSCSS 组合选择符介绍

CSS 组合选择符介绍

时间2024-05-20 09:30:03发布访客分类CSS浏览25
导读:CSS组合选择符包括各种简单选择符的组合方式。 在CSS3中包含了四种组合方式: 后代选择器(以空格分隔 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以波浪号分隔) 后代...
CSS组合选择符包括各种简单选择符的组合方式。 在CSS3中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以波浪号分隔) 后代选择器 后代选择器用于选取某元素的后代元素。 以下实例选取所有

元素插入到

元素中: 实例 divp { background-color:yellow; } 子元素选择器 与后代选择器相比,子元素选择器(Childselectors)只能选择作为某元素直接/一级子元素的元素。 以下实例选择了
元素中所有直接子元素

: 实例 div> p { background-color:yellow; } 相邻兄弟选择器 相邻兄弟选择器(Adjacentsiblingselector)可选择紧接在另一元素后的元素,且二者有相同父元素。 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacentsiblingselector)。 以下实例选取了所有位于

元素后的第一个

元素: 实例 div+p { background-color:yellow; } 后续兄弟选择器 后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。 以下实例选取了所有

元素之后的所有相邻兄弟元素

: 实例 div~p { background-color:yellow; }

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: CSS 组合选择符介绍
本文地址: https://pptw.com/jishu/664058.html
css如何垂直居中元素? 有关CSS显示与可见性

游客 回复需填写必要信息