Как правильно применить правило css к вложенному элементу

ProgramBox

Как правильно применить правило css к вложенному элементу

Post author:admin
Запись опубликована:20 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

Я начинаю в CSS сейчас, и я все еще путаюсь с моделью коробки, с вложенными элементами, которые было бы правильно применить выравнивание слева от списка, используя непосредственно элемент li или элемент ul

 ul {
  background-color: red;
  /*margin-left: -28px*/
}

li {
  margin-left: -28px;
  background-color: green;
}

ul   ul {
  background-color: red;
  margin-left: -28px;
}

ul   ul li {
  margin-left: initial;
  background-color: green;
}

 <ul>
  <li>apple</li>
  <li>banana</li>
</ul>
<ul>
  <li>apple</li>
  <li>banana</li>
</ul>

В чем разница, применяю ли я свойство к ul или li?

1. Зачем вам нужна отрицательная маржа?

2. Сейчас я начинаю с css и хочу разместить список, выровненный слева, но это всего лишь пример, я хочу знать, почему во вложенных элементах, таких как элемент li, который находится внутри ul, где я должен применить свойство, например, где я должен применить свойство слева от поля к элементу li или к элементу ul?

3. Вместо того, чтобы решать, что вам нужна отрицательная маржа, как насчет того, чтобы сообщить нам о своей цели, и мы можем помочь в этом? Могут потребоваться отрицательные поля, но также, если вы установите margin и padding на обоих <ul> , и <li> я думаю, что это может решить вашу проблему. Взгляните на концепцию «сброса CSS».

4. @DavidsaysreinstateMonica На самом деле, я не хочу делать ничего конкретного, это был просто пример теста, я хочу знать, в чем разница, когда я применяю свойство к вложенным элементам, например, в этом примере я применил левое поле как в li, так и в ul, я хотел бы знать, что правильно и каково это поведение?

5. Я не знаю, что, возможно, объяснить. Разница слишком очевидна, не так ли? Правила стиля вступают в силу для тех элементов, которым соответствует их селектор.

Ответ №1:

CSS работает, применяя свойства стиля к селектору. В вашем случае селектором являются либо элементы ul , либо li элементы. Думайте о ul нем как о коробке, а об li элементах-как о коробках внутри ul коробки. Если вы стилизуете ul элемент, только свойства, которые могут быть унаследованы, будут передаваться дочерним элементам, в данном случае li элементам. Вот ужасный список классов CSS, см. столбец «наследовать».

Чтобы ответить на ваш вопрос, text-align свойство наследуется, поэтому, если вы примените его ко ul всем дочерним элементам, они унаследуют это свойство. Это был бы лучший способ сделать это, так как вам нужно указать свойство только один раз в родительском контейнере.

Помимо этого объяснения, похоже, что вы пытаетесь удалить интервал слева от неупорядоченного списка. Вот как это делается, и объяснение:

элементы ‘ul’ по умолчанию имеют заполнение слева, но если вы удалите заполнение, пули затем переполнят контейнер.
Итак, что нам нужно, так это удалить заполнение и установить list-style свойство в inside

 body {
  background: #fefefe;
  padding: 30px;
}

ul {
  background: #efefef;
  padding: 0;
  list-style: inside;
}

 <ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

1. Извините, что спрашиваю об этом здесь, но были бы статьи, блоги, в которых вы рекомендовали бы меня? Следовать в css и становиться все более и более профессиональным, благодарным

2. Я настоятельно рекомендую Pluralsight. Это не бесплатно, но это отличный способ учиться быстрее, чем на Youtube. Что касается бесплатного ресурса, мне нравятся эти ребята на Youtube: веб-разработчик Упрощенный, Кевин Пауэлл, Курс дизайна.

Метки: Как правильно применить правило css к вложенному элементу