选择器高级

1. 选择器初级复习

2. 选择器高级

3. 伪类选择器

当你希望元素在特定的状态下发生样式的变化时，可以使用伪类选择器。

• 状态类

  写法	介绍	举例
  :hover	鼠标悬停	a:hover{color:pink;}
  :link	未被访问的链接（特指a标签）	a:link{color:red};
  :visited	被访问过的链接（特指a标签）	a:visited{color:blue;}
  :active	被点击按下状态	a:active{color:green;}

  :hover :active 不仅仅能用在a标签上。

  :hover最为常用最为重要。

  可以进一步在伪类后进行选择，比如：#wrap:hover .nav{display:none;}

  写法	介绍	举例
  :focus	获得焦点状态	input:focus{border:1px solid blue;}
  :checked	（单选/多选）表单被勾选状态	input:checked{background-color:#aaa;}

• 结构类

  写法	介绍	举例
  E:nth-child(n)	E元素父级的第n个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:nth-child(2){color:red;}
  E:nth-of-type(n)	E元素父级的第n个E元素，无视其他元素	p:nth-of-type(2){color:red;}
  E:first-child	E元素父级的第一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:first-child{color:red;}
  E:last-child	E元素父级的最后一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:last-child{color:red;}

  上述选择器 n 所表示的可以是一个 数字 或者 奇数odd 或者 偶数even 或者 一个表达式，举例：

  #wrap p:nth-child(2){color:red;}
  
  #wrap p:nth-child(odd){color:red;}
  
  #wrap p:nth-child(even){color:red;}
  
  #wrap p:nth-child(3n+1){color:red;}

  :nth-child(n) :nth-of-type(n)有对应的“倒着数”属性 :nth-last-child(n) :nth-last-of-type(n)。

4. 伪元素选择器

伪类选择器相当于在某种情况下添加一个虚拟类名，而伪元素选择器则是相当于创建了一个虚拟元素。

必须拥有 content 样式，上述两个伪元素才会生效。

创建的子元素是一个行内元素。

::after常用来清除浮动。

content 除了写文字之外，还可以用url指定一张图片等其他写法。

其他不常用的伪元素：

5. 补充

样式优先级：!important > 行内样式 > id > class | 属性 | 伪类 | 伪元素 > 标签 | + | ~ | + | 子代 > *

样式值后面可以加上 !important 将这条样式的优先级提到最高。

外部样式表如果有需要的话可以在最开始加上编码规定@charset ‘utf-8’;