CSS и выбор последнего td

Question

Реферат: Каждый ряд строк подробного представления имеет 2 td, и их первый td может применяться к левой границе. Но второй (так что правая ячейка поля tr (строка)) не могла применяться. Даже я попытался

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

или

.dvRowOdd td:last-of-type 

Теперь мое полное сообщение:

Я пытаюсь написать CSS для DetailsView (управления asp.net).

Я закончил верхний и нижний колонтитул. Первый TD клетки (их использование для маркировки) имеют твердую 1px границы (с фоновым изображением), но следующий TD ячейка (используя для размещения элементов управления, как текстовое поле, DropDownList и т.д.) не могут применяться с таким же изображением с:

.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 style. Я добавил весь стиль.

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

Answer 1

Поддержка правил для первого/последнего элемента CSS является шероховатой и не стандартизирована во всех браузерах. Лучший компромисс, который я нашел, - добавить в CSS дополнительный класс «.last» и вставить класс в последний TD с кодом на стороне сервера.