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

以下 CSS 移除了 Bootstrapnext 按钮的圆角:

.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;
      }
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-08-08
      • 1970-01-01
      • 2011-08-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-11-03
      • 2011-03-29
      相关资源
      最近更新 更多