CSS的优先顺序是什么？

有几条规则（按此顺序应用）：

1. 内联css（html样式属性）覆盖样式标签和css文件中的css规则
2. 较具体的选择器优先于较不具体的选择器
3. 如果两个规则具有相同的特异性，则稍后出现在代码中的规则将覆盖先前的规则。
4. 具有的css规则

   !important

   始终优先。

在您的情况下，其规则3适用。

单个选择器从最高到最低的特异性：

• id（例如：

  #main

  selects

  <div id="main">

  ）
• 类（例如：

  .myclass

  ），属性选择器（例如：

  [href=^https:]

  ）和伪类（例如：

  :hover

  ）
• 元件（例如：

  div

  ）和伪元素（例如：

  ::before

  ）

要比较两个组合选择器的特异性，请比较上述每个特异性组中单个选择器的出现次数。

例如：比较

#nav ul li a:hover

#nav ul li.active a::after

• 计算ID选择器的数量：每个（

  #nav

  ）都有一个
• 计算类选择器的数量：每个（

  :hover

  和

  .active

  ）都有一个
• 计算元素选择器的数量：第一个有3

  ul li a

  个（

  ul li a ::after

  ），第二个有4个（），因此第二个组合选择器更加具体。