Как я могу нацелиться на элемент <picture>?

Question

Я прочитал, что для нацеливания на элемент <picture>, я должен просто нацелиться на его часть <img>, так как все элементы <picture> все равно будут отображать <img>.

Однако с этим кодом не похоже на работу. Может я что-то не так делаю?

Когда я это делаю, второй <picture> / <img> не отображает ничего.

body {
  background: grey;
}
.container {
  max-width: 900px;
  margin: 0 auto;
  background: white;
  padding: 1rem;
}

.top-grid-container {
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
            "top-Adrian-Mole top-Misty top-Misty"
            "top-Tasty top-Misty top-Misty";
    grid-gap: 10px;
}

.top-Adrian-Mole {
    grid-area: top-Adrian-Mole;
}

.top-Tasty {
    grid-area: top-Tasty;
}

.top-Misty {
    grid-area: top-Misty;
}

img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
}

.top-grid-container > div > img:nth-of-type(2) {
  display: none;
}

<div class="container"> 
  <h2>Picture Element</h2>
			<div class="top-grid-container">
				<div class="top-Adrian-Mole">
					<picture>
						<source srcset="https://loremflickr.com/320/240/dog 1x, https://loremflickr.com/640/480/dog 2x, https://loremflickr.com/1280/480/dog 3x">
						<img src="https://loremflickr.com/320/240/dog" alt="Adrian Mole">
					</picture>
					<picture>
						<source srcset="https://loremflickr.com/320/240/london 1x, https://loremflickr.com/640/480/london 2x, https://loremflickr.com/1280/480/london 3x">
						<img src="https://loremflickr.com/320/240/london" alt="Adrian Mole">
					</picture>          
				</div>
				<div class="top-Tasty">
					<picture>
						<source srcset="https://loremflickr.com/320/240/paris, 1x, https://loremflickr.com/640/480/paris 2x, https://loremflickr.com/1280/960/cat 3x">
						<img src="img/mobile/TasteHoney@1x.jpg" alt="A Taste of Honey">
					</picture>
					<picture>
						<source srcset="https://loremflickr.com/320/240/monkey 1x, https://loremflickr.com/640/480/monkey 2x, https://loremflickr.com/1280/480/monkey 3x">
						<img src="https://loremflickr.com/320/240/monkey" alt="Adrian Mole">
					</picture>          
				</div>
				<div class="top-Misty">
				  <picture>
						<source srcset="https://loremflickr.com/320/240/cat 1x, https://loremflickr.com/640/480/cat 2x, https://loremflickr.com/1280/480/cat 3x">
						<img src="https://loremflickr.com/320/240/cat" alt="Hello Dolly">
					</picture>
<picture>
						<source srcset="https://loremflickr.com/320/240/code 1x, https://loremflickr.com/640/480/code 2x, https://loremflickr.com/1280/480/code 3x">
						<img src="https://loremflickr.com/320/240/code" alt="Adrian Mole">
					</picture>            
				</div>
</div>
</div>

Answer 1

Фактически вы можете использовать <picture> для нацеливания на элемент. Моя первоначальная информация была неверной.

/* Picture Image */
.top-grid-container > div > picture:nth-of-type(2) {
  display: none;
}

<div class="top-grid-container">
    <picture>
      <source srcset="https://loremflickr.com/320/240/dog 1x, https://loremflickr.com/640/480/dog 2x, https://loremflickr.com/1280/480/dog 3x">
      <img src="https://loremflickr.com/320/240/dog" alt="Adrian Mole">
    </picture>
    <picture>
      <source srcset="https://loremflickr.com/320/240/london 1x, https://loremflickr.com/640/480/london 2x, https://loremflickr.com/1280/480/london 3x">
      <img src="https://loremflickr.com/320/240/london" alt="Adrian Mole">
    </picture>          
</div>

Вы также можете сыграть здесь: https://codepen.io/Balloony/pen/zYGLvBd