CSS 复合选择器

  <div class="food">
	<div class="chuncai">
		<div class="yxrs">鱼香肉丝</div>
		<div class="mxw">毛血旺</div>
	</div>
	<div class="yuecai">
		<div class="bqgfj">白切贵妃鸡</div>
		<div class="mzcs">蜜汁叉烧</div>
	</div>
</div>

后代选择器

选择所有后代（包括儿子，孙子，重孙子。。。）
选择器之间用空格
父选择器 后代选择器
.food .yxrs{
}
.food .yuecai{
}

子代选择器

选择最近所有的亲儿子元素
选择器之间用>（>），注意不要有空格
父选择器>子选择器
.food>.chuancai{
}
.food>.yxrs{ //错误，这是选择孙子
}

并集选择器

用于选择多组来定义相同的样式
选择器之间用英文逗号（,）
任何形式的选择器都可以作为并集选择器的一部分
一组选择器，另一组选择器
.food .yxrs,.food .bqgfj{
}
.yxrs,.bqgfj{
}

伪类选择器

类选择器用一个.表示，而伪类选择器用两个.表示：所以它叫伪类选择器
伪类选择器用于向某些特定选择器添加特殊的效果，比如选择有超链接的，第n个子元素
伪类选择器最大的特点就是用冒号（:）表示，比如： :hover, :first-child
a:link{
}
a:first-child{
}

1. 链式伪类选择器

有：a:link , a:visited, a:hover, a:active,  注意：他们要写都写，而且顺序不能乱，
    记忆法： LV包包好（hao） -> lvha

2. focus选择器

   这个选择器用于获取焦点（光标）的表单元素
   input:focus { //当这个输入框有光标时触发
   }