从分页中删除圆角答案

【问题标题】：Removing rounded corners from pagination从分页中删除圆角
【发布时间】：2016-01-31 18:07:46
【问题描述】：

以下 CSS 移除了 Bootstrap 中 next 按钮的圆角：

.pagination>li:last-child>a{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

我也想从previous 按钮上删除圆角。所以我这样做了：

.pagination a {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;    
}

为什么这不起作用？难道不应该从.pagination 内部的所有a 中删除圆角吗？

【问题讨论】：

请提供更多信息（HTML、Jsfiddle 等）。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

选项 1（推荐）：

.pagination>li:first-child>a, .pagination>li:first-child>span {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

选项 2（推荐）：

.pagination>li:first-child>a, .pagination>li:first-child>span,
.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-radius: 0;
}

选项 3（不推荐）：

.pagination>li>a, .pagination>li>span {
    border-radius: 0 !important;
}

选项 4（不推荐）：

.pagination * {
    border-radius: 0 !important;
}

注意：

我建议反对最后两个选项，因为!important 忽略了特异性，应该尽可能避免，因为这会使您的代码更难维护！但是，它确实允许您使用更小的选择器！

正如makshh 解释的那样，您的代码不起作用的原因是它没有正确的特异性。

【讨论】：

我很想使用最后一个选项，因为我的目标是减少 CSS 的使用量！ IE!important？
是的，IE8 支持。如果您的网站不是那么大，您可以使用此选项。但是，当您有 10000 行 CSS 代码时，您可能会在一两个月内忘记这条 !important 规则，并且很难调试您的 CSS。（尤其是在样式表中有更多 !important 规则的情况下）。
@Yeti : !important 在 IE6、IE7 和 IE8 中应该可以正常工作。由于 CSS 的使用量对您来说非常重要，因此我添加了第四个更短的选项。
选项 4 是我想要的！甚至不知道 * 可以在 CSS 中使用。酷..谢谢！

【解决方案2】：

问题在于您的选择器specificity。 .pagination > a 的特异性低于 .pagination > li:first-child > a 并且您的代码不起作用。

你有两个选择：

首先是覆盖所有Bootstrap样式进行分页：

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

其次是使用!important 规则创建您自己的自定义类来覆盖Bootstrap 样式并使用pagination 类将此类添加到您的div：

.pagination-no-border-radius > li > a,
.pagination-no-border-radius > li > span {
  border-radius: 0 !important;
}

【讨论】：

我想我会选择覆盖选项。很好地了解特异性。谢谢！

【解决方案3】：

要从所有a 中删除border radius 试试

.pagination a {
  border-radius: 0!important;
}

【讨论】：

【解决方案4】：

对于那些希望在 Bootstrap 4 中从分页中删除边界半径的人：

.page-item {
  &:first-child .page-link {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  &:last-child .page-link {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

【讨论】：