Как выбрать более одного числа, если я использую их напрямую вместо «нечетных» и «четных» на css? - PullRequest
0 голосов
/ 26 мая 2020

Я пытался создать макет на CSS, получая помощь от учебника по CSS сетке, человек на видео использовал «четные» и «нечетные» свойства, чтобы выбрать числа, на которые он нацелился работаю, но я хотел сам выбирать числа, чтобы я мог делать вещи более персонализированным способом (он работает только с одним числом), но когда я ищу здесь и в других местах, все, что я получаю, это столбцы, так что я я немного сбит с толку, потому что не знаю, ищу ли я правильные слова и термины, нет ли других приличий, которые можно было бы использовать, и я в конечном итоге думаю, что не нахожу ответа, хотя это может быть единственным ответом, вот код, который я видел в учебнике, который я хотел изменить:

    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />


        <title></title>

    </head>

    <body>
        <style>
    .grid div:nth-child(even){ 
     background-color:red;
    }
    .grid div:nth-child(3){ 
     background-color:green;
    }
    </style>

    <div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    </div>
    </body>

    </html>

.grid div: nth-child (3) {<---- Это часть, которую я хотел изменить, когда пишу только число (3), он выбирает нужную мне строку правильно, но он не работает с более чем одним числом (2,3,5), вот и моя проблема. Я пробовал использовать,; / но ничего из этого не работает, наверное, это что-то глупое. </p>

1 Ответ

1 голос
/ 26 мая 2020

Вы можете выбрать несколько nth-child и разделить их запятой ,.

.grid div:nth-child(2),
.grid div:nth-child(3),
.grid div:nth-child(5) {
  background-color:green;
}

Примечание. Вы также можете использовать формулы в nth-child, если хотите, например nth-child(2n), nth-child(4n+5), et c.

Подробнее о свойстве CSS nth-child можно прочитать здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...