Не применяются стили к дочерним элементам таблицы

Question

Пишу на Vue, не применяются стили к <tr>, <td> в <table>. Как только делаю tr{}, а не table > tr всё работает, хотя, по сути должно и как я писал, table > tr ведь должен все tr найти в table Компонент Vue:

<template>
    <div class="maindiv">
        <div class="catalog">
            <table>
                <tr><td><div><p>t-shorts</p></div></td></tr>
                <tr><td><div><p>shirts</p></div></td></tr>
                <tr><td><div><p>hoodie</p></div></td></tr>
                <tr><td><div><p>jeans</p></div></td></tr>
                <tr><td><div><p>trousers</p></div></td></tr>
                <tr><td><div><p>shorts</p></div></td></tr>
                <tr><td><div><p>sneakers</p></div></td></tr>
                <tr><td><div><p>shoes</p></div></td></tr>
            </table>
        </div>
        <div class="content"></div>
    </div>
</template>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
    .maindiv{
        margin-top: 130px;
        display: flex;
    }

    table > tr{
        font-family: 'Roboto', sans-serif;
        font-size: 18pt;
        font-weight: 100;
    }
</style>

Answer 1

... table > tr ведь должен все tr найти в table...

Нет, не должен. Достаточно открыть инспектор свойств CSS, чтобы в этом убедиться.

Между <table> и <tr> существует ещё тег <tbody>, поэтому нужно указывать в селекторе - table > tbody > tr, чтобы получить строки основного тела таблицы (помните, что существуют ещё разделы заголовка и "подвала" - <thead> и <tfoot>) или table tr, чтобы действительно получить все строки таблицы, включая строки из <thead> и <tfoot>.

<div><!-- тег заменён для демонстрации -->
    <div class="maindiv">
        <div class="catalog">
            <table>
                <tr><td><div><p>t-shorts</p></div></td></tr>
                <tr><td><div><p>shirts</p></div></td></tr>
                <tr><td><div><p>hoodie</p></div></td></tr>
                <tr><td><div><p>jeans</p></div></td></tr>
                <tr><td><div><p>trousers</p></div></td></tr>
                <tr><td><div><p>shorts</p></div></td></tr>
                <tr><td><div><p>sneakers</p></div></td></tr>
                <tr><td><div><p>shoes</p></div></td></tr>
            </table>
        </div>
        <div class="content"></div>
    </div>
</div>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
    .maindiv{
        margin-top: 130px;
        display: flex;
    }

    table tr {
        font-family: 'Roboto', sans-serif;
        font-size: 18pt;
        font-weight: 100;
    }
</style>

БЛОГ НА HUSL

Не применяются стили к дочерним элементам таблицы

Ответы (1 шт):