一、整体顺序

!important>内联样式>选择器设置样式>浏览器默认样式>继承样式

二、选择器优先级顺序（重点)

id选择器>类选择器>伪类选择器>属性选择器>标签选择器>通配符选择器

三、伪类选择器

  • 常见的伪类选择器 ```css //静态伪类 :link 超链接点击之前 :visited 链接被访问过之后

//动态伪类 :hover “悬停”：鼠标放到标签上的时候 :active “激活”： 鼠标点击标签，但是不松手时。 :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

  2. - 伪类选择器这四种状态必须按照固定的顺序写,如果不按照顺序，那么将失效
  3. ```css
  4. /*让超链接点击之前是红色*/
  5. a:link{
  6.   color:red;
  7. }
  8. /*让超链接点击之后是绿色*/
  9. a:visited{
  10.   color:orange;
  11. }
  12. /*鼠标滑过，放到标签上的时候*/
  13. a:hover{
  14.   color:green;
  15. }
  16. /*鼠标点击链接，但是不松手的时候*/
  17. a:active{
  18.   color:black;
  19. }

四、属性选择器

  1. /* 包含title属性的所有元素变为红色 */
  2. *[title] {color:red;}
  4. /* 包含href属性的锚a标签变为红色 */
  5. a[href] {color:red;}
  7. /* 同时包含href和title属性的a标签变为红色 */
  8. a[href][title] {color:red;}