Как я могу переопределить поле родительского элемента в дочернем элементе в CSS (класс и идентификатор)?

Итак, я работаю над разделом сайта, где у меня есть шесть блоков, сгруппированных вместе: три сверху и три снизу, и я хотел дать им всем поле, чтобы разделить их, но затем я хочу, чтобы верхние не есть маржа-топ, поэтому я сделал это:

.boxess {
  display: flex;
  flex-flow: column;
  margin: 1rem;
  width: min-content;
  background-color: white;
}

.boxess #boxes_1 #boxes_2 #boxes_3{
  margin-top: 0;
}

Это ничего не переопределило, и я не думаю, что делать это поштучно — правильный ответ.

Я также пробовал только один идентификатор за раз, чтобы проверить, не в этом ли проблема:

.boxess #boxes_1 {
  margin-top: 0;
}

Тот же результат.

Я также попробовал просто выбрать идентификатор; пробовал отрицательные значения; используя !важно; начальное (наследование) и еще раз ничего.

Я уверен, что делал что-то подобное раньше, но, может быть, это было на отступах, и они по-другому реагируют на переопределение?

Я подхожу к этому неправильно?

Весь фрагмент здесь (добавлен после по предложению):

.learning_content {
  background-color: whitesmoke;
  align-content: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.learning_content h2 {
  text-align: center;
  padding: 2rem;
}

.boxes {
  display: flex;
  flex-flow: row wrap;
  padding: 0 4.5rem 2rem 4.5rem;
  max-width: 66rem;
}

.boxess {
  display: flex;
  flex-flow: column;
  margin: 1rem;
  width: min-content;
  background-color: white;
}

.boxess #boxes_1 {
  margin-top: 0;
}

.boxess img {
  height: auto;
  width: 20rem;
}

.boxess p {
  text-wrap: wrap;
}

<div class = "learning_content">
  <h2>It doesn't hurt to keep learning</h2>
  <div class = "boxes">
    <div class = "boxess" id = "boxes_1">
      <img src = "https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt = "Mac computers with software programming" />
      <h4>Software engineering</h4>
      <p class = "subtitle">COURSES</p>
      <p>Web Development, Mobile Development, iOT, API's</p>
    </div>
    <div class = "boxess" id = "boxes_2">
      <img src = "https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt = "A hand holding a phone over a coffe table with a coffe cup on top" />
      <h4>Computer Art</h4>
      <p class = "subtitle">COURSES</p>
      <p>
        Imaging &amp; Design, Web Design, Motion Graphics, &amp; Visual Effects, Computer Animation
      </p>
    </div>
    <div class = "boxess" id = "boxes_3">
      <img src = "https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt = "A person holding a camera at hip hight ready to shoot" />
      <h4>Design</h4>
      <p class = "subtitle">COURSES</p>
      <p>User Experience Design, User Research, Visual Design</p>
    </div>
    <div class = "boxess" id = "boxes_4">
      <img src = "https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt = "A laptop showing a graph with data" />
      <h4>Data</h4>
      <p class = "subtitle">COURSES</p>
      <p>Data Science, Big Data, SQL, Data Visualization</p>
    </div>
    <div class = "boxess" id = "boxes_5">
      <img src = "https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt = "Brown and bronze chess pieces on a chess board" />
      <h4>Bussines</h4>
      <p class = "subtitle">COURSES</p>
      <p>Product Development, BUssines Development, Startup</p>
    </div>
    <div class = "boxess" id = "boxes_6">
      <img src = "https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt = "A smartwatch in a persons wrist" />
      <h4>Marketing</h4>
      <p class = "subtitle">COURSES</p>
      <p>Analytics, Content Marketing, Mobile Marketing</p>
    </div>

Изображения во фрагменте заменены для представления.

Вопросы, требующие помощи по коду, должны включать кратчайший код, необходимый для его воспроизведения, в самом вопросе, желательно в Фрагменте стека с использованием значка <>. См. Как создать минимальный воспроизводимый пример.

— 31.08.2024 17:11

css margin

31.08.2024 16:52

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Думаю, вам следует просмотреть основы CSS... Вы можете просто использовать:

#boxes_1 {
    margin-top: 0;
}

Идентификатор переопределит класс или:

#boxes_1.boxess {
    margin-top: 0;
}

Или даже:

.boxess:first-child {
    margin-top: 0;
}

Или даже:

.boxes > .boxess {
    margin-top: 0;
}

Судя по всему, мне определенно следует это сделать, и, видя ваш ответ, я могу сказать, что мой синтаксис был по большей части неправильным. Однако я попробовал использовать только идентификатор #boxes_1, и это не дало желаемого результата. В любом случае спасибо, мне нужно было это откровение, чтобы вернуться и взглянуть на основы.

— 31.08.2024 18:19

31.08.2024 18:08