什么组合器选择每个 img 以替换它？

Question

<div id="about" class="tm-content-box">

  <ul class="boxes gallery-container">
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Consult</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/000000/fff">
        <img src="https://dummyimage.com/50x50/000000/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Design</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/0000ff/fff">
        <img src="https://dummyimage.com/50x50/0000ff/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Engineer</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/00ff00/fff">
        <img src="https://dummyimage.com/50x50/00ff00/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Operate</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/ff0000/fff">
        <img src="https://dummyimage.com/50x50/ff0000/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Optimize</h2>
    </li>
  </ul>
</div>

哪个组合器选择带有 class“box-img”的每个 img 以便用另一个替换每个？

#about .box-img:nth-child(1){
background-image: url(../img/img-1.jpg);}

但是没用。可能是图像的分辨率？原来的是250 × 250，我要换的是600 × 400。有没有办法只使用 CSS 来替换每个图像？

Answer 1

您应该只使用 JavaScript 来更新 src 属性。这是一个简短的脚本，可在两秒后将所有图像更改为另一个图像。

window.addEventListener("DOMContentLoaded", (e) => {
  const imgs = document.querySelectorAll("#about .box-img:nth-child(1)");
  const newImage = "https://dummyimage.com/100x100/ff00ff/000000&text=Changed"
  // set image to another one after two seconds
  setTimeout(() => {
    imgs.forEach(img => img.setAttribute("src", newImage))
  }, 2000)
});

<div id="about" class="tm-content-box">

  <ul class="boxes gallery-container">
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Consult</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/000000/fff">
        <img src="https://dummyimage.com/50x50/000000/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Design</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/0000ff/fff">
        <img src="https://dummyimage.com/50x50/0000ff/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Engineer</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/00ff00/fff">
        <img src="https://dummyimage.com/50x50/00ff00/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Operate</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/ff0000/fff">
        <img src="https://dummyimage.com/50x50/ff0000/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Optimize</h2>
    </li>
  </ul>
</div>

如您所见，不同的图像尺寸不会妨碍您执行此操作。你显然可以调整逻辑来做比用相同图像替换所有图像更复杂（但简单）的东西，但原理保持不变。

什么组合器选择每个 img 以替换它？

What combinator selects each img in order to replace it?

html

css

css-selectors