Question

我正在应用一种样式，让每个奇数单元格都有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
}

Answer 1

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

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

应替换为

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

Answer 2

问题是语句中的语法错误。我愿意：

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

语法现在是正确的，它可以正常工作。见fiddle

你不需要重要，因为他们有相同的特殊性，最后一个获胜。

我还更改了语法，添加了“＆gt;”。这不是必要的，但如果风格与先前的声明一致，我发现事后更容易阅读

表的最后一个孩子在CSS中风格化（没有类）

2 个答案: