CSS六大组合选择器

CSS六大组合选择器

CSS的组合选择器,或者称为复合选择器,一般指的是由两个或两个以上的简单选择器通过不同的组合方式组合而成的选择器,这里介绍六种组合选择器,分别为后代元素选择器、子元素选择器、相邻兄弟选择器、交集选择器、并集选择器和通用兄弟选择器。


后代元素选择器语法

A B{ 样式声明 };

提示:A可以是HTML的元素,也可以是HTML元素的类和id。

在线实例编辑器CSS后代选择器语法及实例在线编辑


子元素选择器语法

A > B{ 样式声明 }

提示:A可以是HTML的元素,也可以是HTML元素的类和id。

在线实例编辑器CSS子元素选择器写法和符号


相邻兄弟选择器语法

A + B{ 样式声明 }

提示:相邻兄弟选择器是选择A元素之后紧跟着的兄弟元素B。A可以是HTML的元素,也可以是HTML元素的类和id。

在线实例编辑器CSS相邻兄弟选择器的定义方式


交集元素选择器语法

A .B {样式声明}

一般情况下A为元素,.B为类。注意:A和.B之间没有空格。

在线实例编辑器CSS交集选择器语法怎么写


并集元素选择器语法

A, B, C... { 样式设置 }

提示:A、B和C之间用英文逗号","隔开,后面的“...”表示可以添加多个选择器的结合。

在线实例编辑器CSS并集选择器语法怎么写


通用兄弟选择器语法

A ~ B { 样式设置 }

提示:"~"符号的位置:mac键盘在字母Z的左边,windows键盘在数字1的左边,使用的时候输入法需要切换为英文模式。

在线实例编辑器CSS通用兄弟选择器,匹配同级所有元素



全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.