CSS и выбрав последний тд - PullRequest
0 голосов
/ 17 мая 2009

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

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

или

.dvRowOdd td:last-of-type

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

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

Я закончил верхний и нижний колонтитулы. Первая ячейка 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;
}

1 Ответ

1 голос
/ 17 мая 2009

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

...