CSS 教程CSS 简介CSS 基础语法CSS 高级语法CSS id和classCSS 创建CSS 多重样式CSS 多重样式优先级CSS 背景CSS 文本格式CSS 字体CSS 链接CSS 列表CSS 表格CSS 盒子模型CSS 边框 borderCSS 轮廓 outlineCSS 外边距 marginCSS 内边距 paddingCSS 尺寸 DimensionCSS 定位 ( positioning )CSS display显示 -visibility可见CSS 浮动 ( float )CSS 布局 - OverflowCSS 布局-水平/垂直对齐CSS 选择器CSS 嵌套选择器CSS 组合选择器CSS 属性选择器CSS 伪类CSS 伪元素CSS 导航栏CSS 下拉菜单CSS 提示工具( tooltip )CSS 图片廊CSS 图像透明/不透明CSS 图像拼合技术CSS 媒体类型CSS 表单CSS 计数器(counter)CSS 网页布局响应式 Web 设计 - 介绍响应式 Web 设计 viewport响应式 Web 设计 - 网格视图响应式 Web 设计 - 媒体查询响应式 Web 设计 - 图片响应式 Web 设计 - 视频(Video)响应式 Web 设计 - 框架CSS 基础教程 总结
CSS 组合选择器
css 组合选择器说明了两个选择器直接的关系
CSS组合选择符包括各种简单选择符的组合方式
CSS 3 中包含了四种组合方式
- 后代选取器(以空格分隔)
- 子元素选择器(以大于号分隔）
- 相邻兄弟选择器（以加号分隔）
- 普通兄弟选择器（以破折号分隔）
后代选取器
CSS 后代选取器匹配所有值得元素的后代元素
下面的范例选取所有 <div> 元素中的所有后代元素 <p>
div p
{
background-color:yellow;
}
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素
下面的范例选择了 <div> 元素中所有直接子元素 <p>
div>p
{
background-color:yellow;
}
相邻兄弟选择器
CSS 相邻兄弟选择器 ( Adjacent sibling selector ) 可选择紧接在另一元素后的元素，且二者有相同父元素
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器 ( Adjacent sibling selector)
下面的范例选取了所有位于 <div> 元素后的第一个 <p> 元素
div+p
{
background-color:yellow;
}
后续兄弟选择器
CSS 后续兄弟选择器选取所有指定元素之后的相邻兄弟元素
下面的范例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p>
div~p
{
background-color:yellow;
}