css学习笔记——CSS 组合选择符
2015-04-28 14:33
225 查看
CSS 组合选择符
组合选择符说明了两个选择器直接的关系。 |
在 CSS3 中包含了四种组合方式:
后代选取器(以空格分隔)
子元素选择器(以大于号分隔)
相邻兄弟选择器(以加号分隔)
普通兄弟选择器(以破折号分隔)
后代选取器
后代选取器匹配所有值得元素的后代元素。以下实例选取所有 <p> 元素插入到 <div> 元素中:
实例
div p{
background-color:yellow;
}
子元素选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。以下实例选择了<div>元素中所有直接子元素 <p> :
实例
div>p{
background-color:yellow;
}
相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:
实例
div+p{
background-color:yellow;
}
普通相邻兄弟选择器
普通兄弟选择器选取所有指定元素的相邻兄弟元素。以下实例选取了所有 <div> 元素的所有相邻兄弟元素 <p> :
实例
div~p{
background-color:yellow;
}
相关文章推荐
- HTML&CSS基础学习笔记7-高亮文本及组合使用
- java编程思想学习笔记:如何选择继承与组合
- CSS学习笔记----选择器
- CSS学习笔记之组合选择器
- HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素
- css学习笔记-----选择器
- html css学习笔记-详解各种选择器
- css学习笔记20160128对齐组合选择符伪类伪元素
- html css学习笔记-派生选择器 id选择器 类选择
- css 选择器 (学习笔记)
- <学习CSS>第二天笔记-选择器(标签选择器、类选择器、css命名规范、谷歌案例、多类名选择器、id选择器、通配符选择器、伪类选择器)
- CSS学习笔记(六)CSS 属性选择器
- JavaScript学习笔记之下拉选择框的操作
- [学习笔记—Objective-C]《Objective-C 程序设计 第6版》第六章 选择结构 课后题6-4&6-6&6-7
- 学习Fragment笔记-选择Master/Dtail Flow创建项目开始(1)
- CSS:CSS选择器之【组合选择器】
- .Net学习笔记----2015-07-14(CSS当中的样式属性详解)
- [HeadFist-HTMLCSS学习笔记][第七章CSS入门:加一点样式]
- CSS学习笔记:表格
- css学习笔记