Доступ к изображению div в css

Question

Я хочу настроить вид плиток в HTML. Поэтому я удалил свой предыдущий список со следующим CSS кодом

.tiles li * {
    display: none;
}

.tiles li {
    display: inline-block;
    border-bottom: none;
}

в html моя структура выглядит как короткий код ниже

<main class="tiles">
 <ul>
  <li class="grid-container">
   <div class="gridImageObject">
    <img src="./data/img/100_100.jpeg" class="align-left">
   </div>
  <another li image object...>
  </ul>
</main>

но в CSS Я не могу получить доступ к объекту изображения. :( Только если я собираюсь удалить первый div, я могу получить к нему доступ с помощью

.tiles li img { display: inline-block; ..}

Есть ли способ получить доступ к элементу img без удаления первого элемента div?

Answer 1

Я не совсем уверен, в чем ваша проблема на самом деле, для начала у вас есть следующее правило:

.tiles li * {
    display: none;
}

, которое заставляет НЕ отображаться любой элемент внутри ваших <li> тегов, поэтому если вы хотите увидеть какое-либо изображение, вам нужно удалить это правило.

Затем вы говорите, что хотите построить плиточный макет, может быть, CSS Сетка будет лучшим вариантом для вас, довольно просто сделать для создания, ну, сетка элементов .

* {
  box-sizing: border-box;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 115px);
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
  justify-content: center;
}

.grid-item {
  border: 1px solid #000;
  height: 115px;
  width: 115px;
}

img {
  display: block;
  height: 100%;
}

<div class="grid-container">
  <div class="grid-item"><img src="https://via.placeholder.com/100" alt=""></div>
  <div class="grid-item"><img src="https://via.placeholder.com/100" alt=""></div>
  <div class="grid-item"><img src="https://via.placeholder.com/100" alt=""></div>
  <div class="grid-item"><img src="https://via.placeholder.com/100" alt=""></div>
  <div class="grid-item"><img src="https://via.placeholder.com/100" alt=""></div>
  <div class="grid-item"><img src="https://via.placeholder.com/100" alt=""></div>
</div>

Кроме того, из того, что вы опубликовали после, я должен напомнить вам, что CSS 'единственная задача - применять стили к содержимому, которое вы определяете в своем HTML документ, с CSS вы не «отключаете» или «удаляете» содержимое вашего HTML файла, вы просто его скрываете ... Если вам нужна другая структура элементов для применения разных стилей, вам нужно go в ваш HTML файл и внесите в него изменения