CSS选择器

CSS中可以根据选择器类型把选择器分为基础选择器和复合选择器，符合选择器是建立在基础选择器之上的，对基础选择器进行组合形成的。

一、css基本选择器

1、css语法规范

• css规则由选择器以及一条及多条声明组成。
  

2、CSS代码风格

• 样式格式书写风格：
  • 紧凑风格
  • 展开风格（推荐）
• 样式大小写风格：
  • 小写风格（推荐）
  • 大写风格
• 样式空格风格：
  • 属性前面，冒号后面保留一个空格；选择器与大括号之间保留一个空格
    

3、选择器的作用

选择器的作用是用来选择标签。

4、选择器的分类

选择器分为基础选择器和复合选择器
基础选择器：由单个选择器组成，包括标签选择器、类选择器、id选择器和通配符选择器。

4.1 标签选择器

• 优点：能为页面中同类型的标签设置统一样式。
• 缺点：不能设计差异化样式，只能做选择全部的当前标签。

4.2 类选择器

• 语法：#class_name {属性：属性值; …}
• 优点：节省CSS代码,统一修改也比较简单

4.3 id选择器

• 语法：#id_name {属性：属性值;…}
• 与类选择器的区别：id选择只能调用一次，不允许再次使用；类选择器可以多次被调用

4.4 通配符选择器

• 语法：* {属性名：属性值}
• 不需要调用，就能给所有元素赋予样式

4.5 选择器之间的区别

二、CSS复合选择器

复合选择器类型包括：

• 后代选择器
• 子代选择器
• 并集选择器
• 伪类选择器等

1、后代选择器

• 后代选择器又称包含选择器，可以选择父元素里面子元素。
• 写法：元素1元素2 {样式声明}
  • 元素1与元素2用空格分开
  • 元素1是父类
  • 元素2是孩子
  • 元素1与元素2可以是任意选择器

2、子元素选择器

• 仅选儿子，不选孙子…
• 元素1 > 元素2 {样式声明}

3、并集选择器

• 元素1，元素2 {样式声明}
• 通常用于样式声明

4、伪类选择器

• 作用：伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第1个、n个元素。
• 伪类选择器最大的书写特点是用冒号（:）,比如:hover, :first-child。

4.1 链接伪类选择器

• a:link # 选择所有还未访问的链接
• a:visited # 选择所有已被访问过的链接
• a:hover # 选择鼠标位于其上的链接
• a:active # 选择活动链接（鼠标按下未弹起的链接）
• 注意：
  • 为了确保生效，应按照LVHA(love hate)的顺序声明：link,visited,hover,active
• a一般单独需指定样式，在body中不生效
  

4.2 表单伪类选择器

• :focus 伪类选择器用于选取获得焦点的表单元素。