菜鸟高飞尽之CSS-复合选择器

一、并集选择器（群组选择器）

语法：

选择器1,选择器2,...,选择器n{属性:属性值;}

作用：并集选择器可以选择多组标签，同时为他们定义相同的样式；

说明：

1.并集选择器是各选择器通过英文逗号连接而成；

2.任何形式的选择器都可以作为并集选择器的一部分；

3.并集选择器通常用于集体声明；

二、交集选择器

语法：

选择器1选择器2...{属性：属性值；}

说明：

选择器1和选择器2...都是指向的同一个元素，中间没有标点符号；

如：

<div class="box"></div>

div.box{}

使用场景：

1.更加强调，增加权重的时候

2.可以更加具体的指向目标元素

三、后代选择器（包含选择器）

语法：

选择器1 选择器2 ... 选择器n{属性:属性值;}

说明：

通过父元素，找到子元素，或者通过祖先级元素，找到后代元素；

四、子选择器

语法：

选择器1>选择器2{属性：属性值；}

说明：

选择器1是选择器2的父元素

通过子选择器只能找到父元素的第一级子标签

五、兄弟选择器

语法：

选择器1+选择器2{属性：属性值；}

说明：

选择器2是选择器1后面最近的一个相邻的同辈元素

六、通用选择器（了解）

语法：

选择器1~选择器2{属性：属性值；}

说明：

找选择器1后面所有的同级元素选择器2；

七、动态伪类选择器

语法：

:link{} 初始状态

:visited{} 访问后的状态

:hover{} 鼠标滑过时的状态（常用）

:active{} 激活状态（鼠标按下去没有松开的瞬间）

注意：

1.为了兼容浏览器，一般会把初始状态和访问后的状态设置为一样的效果；

2.所有标签都可以添加鼠标滑过状态（:hover）;

3.:active 是所有标签都可以添加的，但是很少用；

4.如果组合使用这四个伪类选择器的时候，要注意书写顺序，错误的顺序会导致样式显示错误

5.为了节省代码，可以把相同的状态的属性直接写给a，在单独设置不同状态下的样式；

八、设置聚焦时的状态：focus

语法：

：focus{}

作用：

设置表单元素聚焦时的状态