CSS基础
--关系选择器
01后代选择器子元素选择器02目录
关系选择器是依据元素在其位置的上下文关系进行选择，也叫做派生选择器、父子选择器，在CSS1.0称作上下文选择器。比如每个人在自己的家族中都有其位置：祖父爷爷爸爸我儿子叔叔大哥二爷堂伯大堂哥二堂哥堂妹女儿
1后代选择器（1）定义可以选择其元素后代的元素，后代选择器中两个元素之间的间隔可以是无限的。祖父爷爷爸爸我儿子叔叔大哥二爷堂伯大堂哥二堂哥堂妹女儿爷爷是祖父的后代爸爸是祖父的后代我是祖父的后代儿子也是祖父的后代
1后代选择器（3）语法格式祖先元素后代元素{属性:属性值;属性:属性值;………}祖先元素与后代元素之间是空格隔开（2）作用选择匹配的后代元素，并且匹配的后代元素被包含在匹配的祖先元素内
1后代选择器（4）代码示例html
head
??title后代选择器/title
??styletype=“text/css”
?????pspan{
??????color:blue;
??????text-decoration:underline;
?????}
??/style
/head
body
??p我是正常的文字/p
??pspan我是p标签span标签里的内容，是蓝色加下划线了吗？/span/p
??p
span
我是p标签第一个span标签里的内容，是蓝色加下划线了吗？
????span
我是p标签第二个span标签里的内容，是蓝色加下划线了吗？
/span
??/span
/p
/body
/html
p标签是祖先span标签是后代
2子元素选择器（1）定义只能选择作为某元素子元素的元素。祖父爷爷爸爸我儿子叔叔大哥二爷堂伯大堂哥二堂哥堂妹女儿爷爷是祖父的儿子爸爸是爷爷的儿子我是爸爸的儿子儿子也是我的儿子
2子元素选择器父元素子元素{属性:属性值;属性:属性值;………}（2）作用选择匹配的子元素，只有上下一级关系。（3）语法格式父元素与子元素之间是隔开
（4）代码示例2子元素选择器html
head
??title子元素选择器/title
??styletype=text/css
????ulli{
??????color:red;
??????text-decoration:underline;
??????font-style:oblique;
????}
??/style
/head
body
??ul
????li新闻一
??????ul
????????li11月1号/li
????????li11月2号/li
??????/ul
????/li
????li新闻二
??????ol
????????li12月1日/li
????????li12月2日/li
??????/ol
????/li
????新闻三
??/ul
??ol
????li新闻1/li
????li新闻2/li
??/ol
/body
/html与后代选择器的区别：最大的不同是元素间隔不同后代选择器是将该元素作为父元素，它所有的后代元素都是符合条件的，而子元素选择器只是相对于父元素来说的第一级子元素符合条件。
总计
CSS基础
--关系选择器2郭春丽
相邻兄弟选择器01相邻兄弟组选择器02目录
1相邻兄弟选择器（1）定义选择紧接在另一元素后的元素，且二者有相同父元素。祖父爷爷爸爸我儿子叔叔大哥二爷堂伯大堂哥二堂哥堂妹女儿爸爸和叔叔是相邻兄弟关系，他们有共同的父亲
1相邻兄弟选择器（3）语法格式子元素+子元素{属性:属性值;属性:属性值;………}子元素与子元素之间是+隔开（2）作用针对的是同级元素，且两个元素是相邻的，拥有相同的父元素。要分清谁是参照元素，谁是要选择的元素。
1相邻兄弟选择器（4）代码示例html
head
??title子元素选择器/title
??styletype=text/css
????h1+p{
??????color:red;
??????text-decoration:underline;
??????