CSS组合器

2023-09-25 78

CSS组合器是一种机制,用于解释选择器之间的关系。CSS选择器可以包含多个简单选择器,例如后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器 ,且可以使用组合器来定义这些简单选择器之间的关系。

CSS 中有四种不同的组合器:

  • 后代选择器 (空格)
  • 子选择器 (>)
  • 相邻兄弟选择器 (+)
  • 通用兄弟选择器 (~)

一、后代选择器

后代选择器匹配属于指定元素后代的所有元素。下面的例子选择 <div> 元素内的所有 <p> 元素:

div p {
background-color: yellow;
}

二、子选择器

子选择器匹配属于指定元素子元素的所有元素。下面的例子选择属于 <div> 元素子元素的所有 <p> 元素:

div > p {
background-color: yellow;
}

三、相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟(同级)元素必须具有相同的父元素,“相邻”的意思是“紧随其后”。下面的例子选择紧随 <div> 元素之后的所有 <p> 元素:

div + p {
background-color: yellow;
}

四、通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素:

div ~ p {
background-color: yellow;
}

五、所有CSS组合选择器

CSS组合器

  • 广告合作

  • QQ群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。
CSS组合器
上一篇: CSS display属性
CSS组合器
下一篇: CSS图标