CSS选择器

• 基础选择器
  1.元素选择器
  元素选择器书写格式：标记名{/声明块/}
  适用范围：只要选择了这个元素可改变此类元素样式
  2.类选择器
  类选择器书写格式：.类名{/声明块/}
  适用范围：所有class属性值相同的标签
  冒号左侧属性名，冒号右侧声明（组成声明）

  3.ID选择器
  id的选择器书写格式：#id值{/声明块/}
  写CSS时不允许用，预留给JS用
  锚点可用id的选择器
  在同一个HTML页面中，元素的id值必须唯一

4.通配符选择器
不建议用的选择器
禁用此选择

5.组合选择器，并集选择器 （都改变样式）
书写格式：标签名+逗号+标签名…

层次选择器
1.子级选择器（直接包含）
书写格式：父元素+>+子元素

2.后代选择器（可以是子级也可以是子级的后代）
书写格式：父元素+>空格+子元素《尽量少用》

3…兄弟选择器 （相邻（兄弟）选择器）注：AB二个元素之间没有任何其他标签
书写格式：兄弟元素A+兄弟元素B
例：p+div{ } 注：AB两个元素之间没有其他任何标签（p下的div变样式）

4.通用选择器（不相邻兄弟）注：选中A元素后的所有兄弟元素B
书写格式：兄弟元素A+"~"兄弟元素B
p~div{ } 注：选中A元素后面所有的兄弟元素B （p下的所有div变样式）

伪类选择器

1.结构伪类选择器

nth-child 选中第n个元素
书写结构：元素名：nth-child(位置)
适用场景：所有兄弟元素都是相同标签名

2.last-child 选中最后一个元素
选中倒数第n个元素

书写格式：nth-last-child(个数)
选中正数第n个元素

书写格式：nth-first-child(个数)
nth-of-type
选中第n个元素
书写结构：元素名：nth-of-type(位置)
适用场景：兄弟元素标签名可以不同
last-child
书写格式：last-child
选中最后一个元素

first-child 选中第一个元素
书写格式：first-child

nth-child 选中偶数项元素
方式1：元素名：nth-child(2n)
方式2：元素名：nth-child(even)

nth-child 选中基数项元素
方式1：元素名：nth-child(2n+1)
方式2：元素名：nth-child(odd)

nth-child 选中前n个元素
方式1：书写格式：元素：nth-child(-n+个数) 《正数》
例子：选中前三个
p:nth-child(-n+3)
方式2：书写格式：元素：nth-last-child(n+个数) 《倒数》
例子：选中前三个
p:nth-last-child(n+3)

选中倒数第n个元素
书写格式：nth-last-child(个数)

选中正数第n个元素
书写格式：nth-first-child(个数)

1.nth-of-type
选中第n个元素
1.书写结构：元素名：nth-of-type(位置)
2.适用场景：兄弟元素标签名可以不同

2.否定伪类选择器

否定一个元素书写格式：元素名：not(否定的元素)
例子：除了第三个都变样式p:not(nth-child(3)){color：red；否定多个元素书写格式：元素名：not(否定的元素位置1)：
not(否定的元素位置2)例子：除了第三个第四个都变样式p:not(nth-child(3)):not(nth-child(4)){color：red；
3.动态伪类选择器状态
1.状态1：link 未访问状态
2. 状态2 :hover 悬停 （ 鼠标移上去）
3. 状态3. :active 点击时
4. 状态4. :visited

5,. 已访问书写顺序1：：link/:hover/:active/:visited
5. 书写顺序2：：:visited/link/:hover/:active
6.注：link和visited只适用于a标签判断是否有没有点击过，取决于herf值
{扩展}focus 获取焦点当a标签被激活时，即获取到焦点框。（键盘tab键)注：类似于鼠标移入

伪元素选择器
1
元素A：：before
before是元素A的第一个子元素
元素B：：afterafter是元素A的最后一个子元素

2
元素A：：first-line元素A的第一行
元素B：：first-litter元素A的第一个字
3.
选中内容的样式添加 (前面元素加body或者HTML都可以）
书写格式： ：：selection注：目前只支持字体颜色和背景色
属性选择器

1书写格式：元素名[属性名=“属性值”]
2书写格式：元素名[属性名^=“部分属性值”]
注：表示以开头的属性值
3书写格式：元素名[属性名$=“部分属性值”]
注：表示以开头的属性值