CSS后代选择器,子选择器和相邻兄弟选择器
2024-10-19 00:31:07
平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结:
1,后代选择器和子选择器区别:
①写法不一样:
后代选择器的标识为:空格
如:ul li{width:150px;} 【ul和li之间用空格隔开】
子选择器的标识为:>
如:ul>li{width:150px;}【ul和li之间用>隔开】
相邻兄弟选择器的标识为:+
如:h1 + p {margin-top:50px;}[h1和p之间用+隔开]
②功能不一样:
后代选择器(descendant selector),又称为包含选择器,可以选择某元素后代的元素(子子孙孙元素),如上例,后代选择器是选择ul包围的所有元素中的所有li元素,包括儿子元素、孙子元素、曾孙元素等等等。
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素儿子元素的元素,子选择器仅仅选择ul包围的儿子元素中的 li元素,不包括孙元素、曾孙元素等等等。
相邻兄弟选择器很好理解,即选择紧接在另一元素后的元素,且二者有相同父元素。
③兼容性不一样:
后代选择器主流浏览器都兼容。
子选择器和相邻兄弟选择器在IE6是不被支持的选择器,会出bug!
2,后代选择器,子选择器和相邻兄弟选择器结合使用示例:
请看下面这个选择器:
html > body table + ul {margin-top:20px;}
这个选择器解释为:选择紧接在 table 元素后出现的第一个相邻兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。
最新文章
- NodeJS写个爬虫,把文章放到kindle中阅读
- 关于大数据企业信息查询的API该怎么写
- 致命错误: zlib.h:没有那个文件或目录
- iOS第八课——Navigation Controller和Tab bar Controller
- gdb 常用内容
- mongostat 3.2指标详解
- 爬虫技术之——bloom filter(含java代码)
- MSSQLSERVER数据库- 上移和下移的存储过程
- 【转】Linux下svn的常用工作流程
- Java中的String,StringBuffer,StringBuilder详解与区别
- 全栈JavaScript之路(七)学习 Comment 类型节点.
- DB2错误代码
- C++编程之面向对象的三个基本特征
- unity插件开发——AssetDatabase
- oracle 小测
- 团队作业4——第一次项目冲刺(Alpha版本) Day1
- Python中使用type、metaclass动态创建方法和属性
- css之字体的引用
- Vue(九)小案例 - 百度搜索列表(跨域)
- laravel C层接收数据的步骤