1

我正在应用一种样式，让每个奇数单元格都有 2px 实心底边框，每个偶数单元格都有 1px 实心底边框。我想以最后一个孩子为目标，使其具有 2px 实心底部。这是我现在的代码（除了底部有 2px 实心之外，它可以工作。）

（请注意：我对 CSS 非常陌生，按照 twitter bootstrap CSS 做我能做的并将其中的一些调整到我的网站。这是我的第一个 CSS 项目。我知道这里有很多与旧浏览器的兼容性问题，但坦率地说，我不在乎......）

.table-bordered {
  border: 1px solid #dddddd;
  border-collapse: separate;
  *border-collapse: collapse;
  border-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
  border-bottom: 2px solid #333;
}

.table-striped tbody > tr:nth-child(even) > td,
.table-striped tbody > tr:nth-child(even) > th {
  border-bottom: 1px solid #333;
}

.table-striped 
tbody  tr:last-child td {
  border-bottom: 2px solid: #333;!important
}
4

2 回答 2

0

问题是语法脏，你在错误的地方使用colon和，所以这个!important

border-bottom: 2px solid: #333;!important
                      --^-- --^--

应该替换为

border-bottom: 2px solid #333 !important;
于 2013-05-30T15:58:09.033 回答
0

问题是语句中的语法错误。我会做：

.table-striped tbody > tr:nth-child(even) > td,
.table-striped tbody > tr:nth-child(even) > th {
     border-bottom: 1px solid #333;
}

.table-striped tbody > tr:last-child > td {
    border-bottom: 2px solid #333;
}

语法现在是正确的，并且可以正常工作。见小提琴

您不需要重要，因为它们具有相同的特异性，最后放置的获胜。

我还更改了语法，添加了“>”。不是必须的，但是如果样式与之前的声明一致，我会发现以后更容易阅读

于 2013-05-30T18:23:52.867 回答