-1

摘要：detailsview的每个字段行都有2个td，它们的第一个td可以应用左边框。但是第二个（所以字段 tr(row) 最右边的单元格）不能应用。即使我尝试过

.dvRowEven td:nth-last-child(even)

或者

.dvRowOdd td:last-of-type

现在我的完整信息：

我正在尝试为 DetailsView（asp.net 控件）编写 css。

我完成了页眉和页脚。第一个 td 单元格（使用它们进行标记）具有 1px 实心边框（带有背景图像），但下一个 td 单元格（用于放置文本框、下拉列表等控件）不能应用于相同的图像：

.dvRowEven td:nth-last-child(even)
{
    border-right: solid 1px #B4B4B2;
    padding-left: 5px;
    padding-bottom: 3px;

    background-position:right top;
    background-image: url('../images/dv/tdLeftBorder.gif');
    background-repeat: repeat-y;
}
.dvRowOdd td:last-of-type
{
    border-right: solid 1px #B4B4B2;
    padding-left: 5px;
    padding-bottom: 3px;

    background-position:right top;
    background-image: url('../images/dv/tdLeftBorder.gif');
    background-repeat: repeat-y;
    background-color:Yellow;
}

CSS 样式。我添加了整个样式。

body
{
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-image: url('../images/bkg_topleft.jpg');
    background-position: left top;
    padding: 10px 0 0 10px;
    background-color: #f8f7f2;
    text-align: left;
}
.dv
{
    font-family: Trebuchet MS;
    text-align: left;
    background-image: url('../images/dv/dvAll.gif');
    background-repeat: repeat-x;
    -moz-border-radius: 75px;
    background-color: white;
    width: 350px;
    margin: 0 10px;
}
.dvHeader
{
    /*---------- HEADER ---------------*/
    border: 0;
    vertical-align: top;
}
.dvHeaderLeft
{
    float: left;
    width: 8px;
    height: 50px;
    background-image: url('../images/dv/headerLeft_50.gif');
    background-repeat: no-repeat;
    background-position: left top;
    border: 0;
    vertical-align: top;
}
.dvHeaderCenter
{
    float: left;
    height: 30px;
    padding: 10px;
    text-indent: 5px;
    font-size: 15px;
}
.dvHeaderRight
{
    float: right;
    width: 8px;
    height: 50px;
    background-image: url('../images/dv/headerRight_50.gif');
    background-repeat: no-repeat;
    background-position: right top;
    border: 0;
    vertical-align: top; /*---------- BİTTİ HEADER ---------------*/
}
.dvCommandRow td
{
    border-right: solid 1px #B4B4B2;
    border-left: solid 1px #B4B4B2;
    text-align: right;
    padding: 5px;
    background-image: url('../images/dv/tdLeftBorder.gif');
    background-repeat: repeat-y;
}
.dvCommandRow td a
{
    color: #3e6d8e;
    background-color: #e0eaf1;
    border: 1px solid #7f9fb6;
    margin-top: 2px;
    margin-right: 2px;
    margin-bottom: 2px;
    margin-left: 0pt;
    padding-top: 3px;
    padding-right: 4px;
    padding-bottom: 3px;
    padding-left: 4px;
    text-decoration: none;
    font-size: 90%;
    line-height: 2.2;
    white-space: nowrap;
}
.dvCommandRow td a:hover
{
    background-color: #3e6d8e;
    color: #e0eaf1;
    border: 1px solid #33ccff;
    text-decoration: none;
}
.dvFooter
{
    /*---------- FOOTER ---------------*/
    background-image: url('../images/dv/dvFooterCenter.gif');
    background-repeat: repeat-x;
    background-color: transparent;
    background-position: left top;
    border: 0;
    height: 6px;
    vertical-align: top;
}
.dvFooterLeft
{
    float: left;
    width: 8px;
    height: 6px;
    background-image: url('../images/dv/dvFooterLeft.gif');
    background-repeat: no-repeat;
    background-position: left top;
    background-color: Transparent;
    border: 0;
    vertical-align: top;
}
.dvFooterCenter
{
    float: left;
    height: 6px;
    background-image: url('../images/dv/dvFooterCenter.gif');
    background-repeat: repeat-x;
    border: 0;
    vertical-align: top;
}
.dvFooterRight
{
    float: right;
    width: 8px;
    height: 6px;
    background-image: url('../images/dv/dvFooterRight.gif');
    background-repeat: no-repeat;
    background-position: right top;
    border: 0;
    vertical-align: top; /*---------- BİTTİ FOOTER ---------------*/
}
.dvEmptyDataRow
{
    border-right: solid 1px #B4B4B2;
}
.dvRowEven td:nth-last-child(even)
{
    border-right: solid 1px #B4B4B2;
    padding-left: 5px;
    padding-bottom: 3px;

    background-position:right top;
    background-image: url('../images/dv/tdLeftBorder.gif');
    background-repeat: repeat-y;
}
.dvRowOdd td:last-of-type
{
    border-right: solid 1px #B4B4B2;
    padding-left: 5px;
    padding-bottom: 3px;

    background-position:right top;
    background-image: url('../images/dv/tdLeftBorder.gif');
    background-repeat: repeat-y;
    background-color:Yellow;
}
.dvField
{
    border-left: 1px solid #B4B4B2;
    padding: 0 5px;
    font-weight: bold;
    font-style: normal;
    text-align: right;
    background-image: url('../images/dv/tdLeftBorder.gif');
    background-repeat: repeat-y;
}
4

1 回答 1

1

对第一个/最后一个元素 CSS 规则的支持是不稳定的，并且不是在所有浏览器中都标准化。我发现的最佳折衷方案是在 CSS 中添加一个额外的“.last”类，并使用服务器端代码将该类粘贴到最后一个 TD 中。

于 2009-05-17T01:24:05.037 回答