html - CSS 特异性 - 跨浏览器问题

Question

这对我来说是一个学习练习，所以在此先感谢您没有告诉我为什么我不想执行以下操作。我不想做，我想明白。

给定以下 CSS:

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

input[type="checkbox"]:focus {
    outline: none;
}

两者的特异性都显示为 0,2,1，而且我读到的有关 CSS 的所有内容都说第二种样式应该覆盖第一种样式，因为它排在最后。如果我更具体地了解第二种风格，它就会获胜。但正如发布的那样，Chrome 不显示轮廓，但 IE11 和 FF28 显示。在我看来，这就是 CSS 的基本简单应用。有没有人深入了解根本问题是什么，以便我在开发样式表时可以将其纳入我的想法？

编辑:如果我删除第二种样式，Chrome 也不会显示轮廓。在 Chrome 中，outline: thin dotted 被以下轮廓线覆盖。因此，根据规范，Chrome 似乎是按章办事，而 FF 和 IE 不是？浏览器解释 CSS 的方式是否是联合与覆盖的区别？

Answer 1

抱歉，错误是我的。当我从 bootstrap.min.css 切换到 bootstrap.less 时，我没有从加载中删除前者，所以它最后加载并覆盖了我的 Site.less -> site.css。在我尝试创建一个 fiddle 之后我想通了，我应该首先这样做。随意以应有的方式将这篇文章降级为 hell 。