CSS 教程
- 第1节:CSS 简介
- 第2节:CSS 语法
- 第3节:CSS Id 和 Class选择器
- 第4节:CSS 创建
- 第5节:CSS Backgrounds (背景)
- 第6节:CSS Text(文本)
- 第7节:CSS Fonts (字体)
- 第8节:CSS 链接样式
- 第9节:CSS 列表样式 (ul)
- 第10节:CSS Table (表格)
- 第11节:CSS Box Model (盒子模型)
- 第12节:CSS Border (边框)
- 第13节:CSS 轮廓(outline)属性
- 第14节:CSS Margin(外边距)
- 第15节:CSS Padding(填充)
- 第16节:CSS 分组和嵌套
- 第17节:CSS 尺寸 (Dimension)
- 第18节:CSS Display (显示) 与 Visibility(可见性)
- 第19节:CSS Positioning (定位)
- 第20节:CSS Float(浮动)
- 第21节:CSS 水平对齐 (Horizontal Align)
- 第22节:CSS 组合选择符
- 第23节:CSS 伪类
- 第24节:CSS 伪元素
- 第25节:CSS 导航栏
- 第26节:CSS 下拉菜单
- 第27节:CSS 图像透明/不透明
- 第28节:CSS 图像拼合技术
- 第29节:CSS 媒体类型
- 第30节:CSS 属性选择器
CSS 组合选择符
CSS 组合选择符
CSS 组合选择符可以让你直观的明白选择器与选择器之间的关系。CSS 组合选择符
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
- 后代选取器(以空格分隔)
- 子元素选择器(以大于号分隔)
- 相邻兄弟选择器(以加号分隔)
- 普通兄弟选择器(以波浪号分隔)
后代选取器
后代选取器匹配所有指定元素的后代元素。
以下实例选取所有 <p> 元素插入到 <div> 元素中:
实例
div p
{
background-color:yellow;
}
{
background-color:yellow;
}
子元素选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
以下实例选择了<div>元素中所有直接子元素 <p> :
实例
div>p
{
background-color:yellow;
}
{
background-color:yellow;
}
相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:
实例
div+p
{
background-color:yellow;
}
{
background-color:yellow;
}
普通相邻兄弟选择器
普通兄弟选择器选取所有指定元素的相邻兄弟元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
实例
div~p
{
background-color:yellow;
}
{
background-color:yellow;
}