【发布时间】：2013-01-06 03:19:50
【问题描述】：
我只是偶然发现了 css 的特殊性，同时试图改变我的主题的分页风格。
我使用 twitter-bootstrap 作为基本模板，但我想更改分页。
具体来说，我想去掉 will-paginate bootstrap 自带的分页边框：
will-paginate/bootstrap
.pagination a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #DDDDDD;
border-image: none;
border-style: solid;
border-width: 1px 1px 1px 0;
float: left;
line-height: 34px;
padding: 0 14px;
text-decoration: none;
}
我只需要这个：
.pagination a {
float: left;
line-height: 34px;
padding: 0 14px;
}
问题是，如果我在我的 custom.css.scss 文件中设置它，那么引导程序的特异性比我的更高（检查this 对特异性的很好解释）。我什至尝试使用 !important，但它仍然没有提高我的特异性。
我已经通过使用平等特异性规则解决了这个问题 - 具有相同特异性的最后一个是重要的，只需输入：
.pagination a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #DDDDDD;
border-image: none;
border-style: none;
border-width: 1px 1px 1px 0;
float: left;
line-height: 34px;
padding: 0 14px;
text-decoration: none;
}
但这只是无用的 css，因为我根本不需要边框......
你有什么建议？
【问题讨论】：
-
Itsalltime：您误解了特异性。即使您创建了一个比您希望覆盖的 CSS 更具体的特定 css 选择器，它仍然只覆盖您实际声明的 css。如果底层 css 为边框声明了一个值，但您非常具体的 css 没有，则边框不会消失。您需要将边框定义为无。
-
所以你说的是特异性与属性有关，而不是类？
-
我不确定 OOP 类是否是一种有用的思考方式。 CSS 的行为与它们不同。 CSS 选择器不是一个单独的命名空间。不要过度考虑特异性。特异性是 CSS 选择器、属性和定义顺序的组合。基本上，将 CSS 视为“级联”规则——它们是按顺序解析的，如果它们相同或更具体，以后的规则可以覆盖以前的规则。没有比这更复杂的了。
-
谢谢Jhong...我可以解释的是，特异性规则适用于属性级别，而不是选择器级别。我的意思是，即使选择器 1 比 2 更具体，如果 2 具有 1 没有的属性（或相反），我的元素将同时具有 1 和 2 选择器的属性。我可能会发现强制相同的相同属性超越其他属性的唯一方法是将属性定义为！important，或者强制它由 last 定义。
-
是的。因为它们不是您在命名空间中设置并编译和运行的类——它们只是对渲染器的指令，按照遇到的顺序进行解析。就像指导家庭装饰师一样。如果你已经告诉他把墙漆成红色，它就会是红色的。如果你稍后告诉他移动墙壁，它仍然是红色的，除非你告诉他重新粉刷它。它们只是一组指令，而不是类。
标签： css twitter-bootstrap will-paginate css-specificity