Могу ли я сделать свойство применимым только к выбранным дочерним элементам?

Question

Скажем, у меня есть следующий код!

<div class="container">
    <div class="container__first">I am a box maybe!</div>
    <div class="container__second">I am a circle maybe!</div>
</div>

.container {
    overflow: hidden; /*How can I make it so this property only applies to container__first but not 
                      the second*/
}

Answer 1

Если вы уже установили классы container_first и container_second, вы можете просто установить разные свойства в CSS. Чтобы упростить задачу, я выделю текст в первом контейнере жирным шрифтом, а текст во втором контейнере - курсивом. См .:

.container__first {
    overflow: hidden;
    font-weight: bold;
}

.container__second {
    overflow: visible;
    font-style: italic;
}

<div class="container">
    <div class="container__first">I am a box maybe!</div>
    <div class="container__second">I am a circle maybe!</div>
</div>

---

Если вы не хотите назначать классы, есть несколько других вариантов. Как и в @ ramon-de-vires, указанном выше, вы можете назначить узел :nth-child или :last-child последнему дочернему элементу (или указанному c дочернему элементу) в CSS, как показано:

.container p {
    overflow: hidden;
    font-weight: bold;
}

.container p:last-child {
    overflow: visible;
    font-style: italic;
    font-weight: normal;
}

<div class="container">
    <p>I am a box maybe!</p>
    <p>I am a circle maybe!</p>
</div>

---

Возможно, самый простой способ - использовать объявление !important, которое переопределяет и игнорирует последующие правила стилизации в CSS. Просто добавьте !important после параметра любого свойства (но перед ;), чтобы указать, что значения должны заменять значения, определенные в другом месте.

Answer 2

вы можете сделать это с помощью :nth-child(), выберите div после .container с помощью .container div, а в :nth-child() вы можете выбрать, какой дочерний элемент выбрать.

.container div:nth-child(1) {
        overflow: hidden; /*How can I make it so this property only applies to container__first but not */
        background: green;            /*     the second*/
    }

<div class="container">
        <div class="container__first">I am a box maybe!</div>
        <div class="container__second">I am a circle maybe!</div>
    </div>

    

редактировать проще всего было бы просто стилизовать .container__first{} или .container .container__first{}, если вам нужен только этот дочерний элемент.