Блог

Главная - Вопросы по программированию - Есть ли способ настроить таргетинг на отдельные элементы?

Есть ли способ настроить таргетинг на отдельные элементы?

#html #css

#HTML #css — код

Вопрос:

Есть ли способ настроить таргетинг на нижние tds только первой и второй строк? Я пробовал просто использовать tr> td{border-bottom:black solid 1px;}, но он проходит через все tds.

 <!DOCTYPE html>
<html>
<head>
    <title>Index.html</title>
    <link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>
    <table>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>        
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>

    </table>
</body>
</html>

Вот что у меня есть до сих пор для css

 td{
    height:100px;
    width:100px;
}
tr > td:nth-of-type(1){
    border-right:1px solid black;
}
tr > td:nth-of-type(3){
    border-left:1px solid black;
}

Ответ №1:

Уверен, вы можете использовать это:

 tr:nth-of-type(-n   2) > td:nth-of-type(-n  2){
    border-bottom:1px solid black;
}

рабочий пример:

 td{
    height:100px;
    width:100px;
}
tr > td:nth-of-type(1){
    border-right:1px solid black;
}
tr > td:nth-of-type(3){
    border-left:1px solid black;
}

tr:nth-of-type(-n   2) > td:nth-of-type(-n  2){
    border-bottom:1px solid black;
} 
 <!DOCTYPE html>
<html>
<head>
    <title>Index.html</title>
    <link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>
    <table>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>        
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>

    </table>
</body>
</html>

Комментарии:

1. О, вау, спасибо, это очень помогает, -n 2 — это то, что нацелено только на эти два элемента, я предполагаю.

2. -n 2 нацелен на первые 2 элемента в :nth-of-type . Итак, у нас есть 2 :nth-of-type , один для tr и один для td . Итак, мы выбрали первые 2 элемента типа td в каждой из первых 2 строк типа tr

Ответ №2:

Да, с :nth-of-type вами можно сделать, например, это:

выбор ничего, кроме первых 2 tr и ничего, кроме первых 2 td внутри

 td{
    height:100px;
    width:100px;
}
tr > td:nth-of-type(1){
    border-right:1px solid black;
}
tr > td:nth-of-type(3){
    border-left:1px solid black;
}
table tr:nth-of-type(-n 2) td:nth-of-type(-n 2){
  border-bottom: 1px solid black;
} 
 <!DOCTYPE html>
<html>
<head>
    <title>Index.html</title>
    <link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>
    <table>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>        
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>

    </table>
</body>
</html>

Ответ №3:

Для традиционной сетки из девяти квадратов вы можете использовать table tr:not(:last-child) td таргетинг на все ячейки во всех строках, кроме последней:

 td{
    height:100px;
    width:100px;
}
tr > td:nth-of-type(1){
    border-right:1px solid black;
}
tr > td:nth-of-type(3){
    border-left:1px solid black;
}
table tr:not(:last-child) td {
  border-bottom: 1px solid black;
} 
 <!DOCTYPE html>
<html>
<head>
    <title>Index.html</title>
    <link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>
    <table>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>        
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>

    </table>
</body>
</html>

Изменение этого значения на table tr:not(:last-child) td:not(:last-child) будет нацелено на первые два квадрата в каждой строке, оставляя третий столбец пустым.

Метки: