这篇文章主要介绍css上下文选择器有多少种类型,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
古浪网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联于2013年创立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
css上下文选择器有四种类型:1、后代选择器,可选择当前元素的所有后代元素;2、父子选择器,可选择当前元素的所有子元素;3、同级相邻选择器,可选择拥有共同父级且相邻的元素;4、同级所有选择器,可选择拥有共同父级的后续所有元素。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
上下文选择器就是构成了"父子"或层级关系的一组元素,通过他们的关系设置样式
html 文档,看上去就像一颗倒置的”树”,所以是有层级结构的
每一个元素, 在文档中, 都有自己的位置,即上下文关系
所以, 完全可以根据元素的上下文关系,来获取到它们
一个元素的四种角色
序号 | 角色 | 描述 |
---|---|---|
1 | 祖先元素 | 拥有子元素,孙元素等所有层级的后代元素 |
2 | 父级元素 | 仅拥有子元素层级的元素 |
3 | 后代元素 | 与其它层级元素一起拥有共同祖先元素 |
4 | 子元素 | 与其它同级元素一起拥有共同父级元素 |
四种上下文选择器
序号 | 选择器 | 操作符 | 描述 | 举例 |
---|---|---|---|---|
1 | 后代选择器 | 空格 | 选择当前元素的所有后代元素 | div p , body * |
2 | 父子选择器 | > | 选择当前元素的所有子元素 | div > h3 |
3 | 同级相邻选择器 | + | 选择拥有共同父级且相邻的元素 | li.red + li |
4 | 同级所有选择器 | ~ | 选择拥有共同父级的后续所有元素 | li.red ~ li |
示例
上下文选择器 123456789
以上是“css上下文选择器有多少种类型”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!