选择器

css注释的书写格式和HTML一样：/* 注释内容 */

由选择器和声明块组成

CSS基本选择器

• 通配符选择器

  书写格式：*{声明块}

  例子：*{color:red ;}

• 类选择器

  书写格式：.类名{声明块}

  先给要选中的标签赋值“class”

  例子：.zy{color:red;}

• ID选择器

  书写格式：#ID名{声明块}

  注：ID名匹配html标签中的ID的值

  例子：#zy{color:red;}

  一个页面ID值不可以重复

  ID选择器的权重很高

• 组合选择器，并列选择器

  书写格式：类名,类名,类名{声明块}

  例子：h1,h2,.box,#zy{color:red;}

   

命名规范（适用范围）

• 不要以数字开头

• 包含的字符（字母，数字，下划线，连字符）

• 区分大小写（大小写敏感）

• 层次选择器

• 子代选择器（子级选择器） 格式：父元素>子元素{声明块} 前提：要有元素嵌套 特点：只能一层一层的选

  例子：p>span{color:red;}

• 后代选择器

  格式：祖先元素+空格+后代选择器{声明块}

  例子：article section{color :red;}

  选择器一定选择的是离大括号最近的元素

   

• 兄弟选择器

  格式：兄弟元素A+“+”+兄弟元素B{声明块}

  功能：选中元素A后面的第一个兄弟元素（即相邻选择器）

  例子：P+P{color:red;}

  格式：兄弟元素A+“~”+兄弟元素B{声明块}

  功能：选中元素A后面的所有兄弟元素B

  例子：P~P{color:red;}

• 选中第n个元素（方式2）使用场景：所有元素的名字可以不相同

  格式：元素：nth-of-type（n）你是第几个元素

  例子：p：nth-of-type（3）{声明块}

  注：先筛选类型，在结果中选择第n个元素。

• 伪类选择器

  格式：元素:nth-child(n) n是第几个元素

  例子：p:nth-child(3){声明块}(子元素标签名相同就用它)

• 选中第一个元素

  格式：元素:first-child

  例子：p:first-child{声明块}

• 选中最后一个元素

  格式：元素:last-child

  例子：p:last-child{声明块}

• 选中奇数项元素

  格式：元素:first-child（odd）

  格式：元素:first-child（2n+1）注：n的起始值为0

  例子：p:first-child（odd）{声明块}

• 选中偶数项元素

  格式：元素:first-child（even）

  格式：元素:first-child（2n）注：n的起始值为0

  例子：p:first-child（even）{声明块}

• 扩展

• 选前M个元素

  格式：元素:nth-child(-n+m)

  例子：选中前3个p元素

  p：nth-child(-n-3){声明块}

• 否定伪类选择器

  格式：元素:not(:nth-child(n))

  例子：除了第三个p元素以外的p元素都变成红色

  p:not(:nth-child(3)){声明块}

• 动态伪类选择器

  a标签的4种状态（一定要顺序进行书写）

  1.未访问 link

  2.已访问 visited

  3.focus焦点激活

  4.悬停 hover

  5.点击 active

  A方案：12345

  B方案：21345

•