Question

我正在尝试在1st，3th，5th img或div元素上提供radius属性。尝试使用第一个子图像.image img：nth-of-type（1），但它们两个都为每五个元素指定了半径。谁能给我答案为什么会这样？

.image img:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

    <div className="container">
        <div className="gallery-container w-2 h-2">
          <div className="gallery-item">
            <div className="image">
              <img src={this.props.photos.room_photos[0].imageUrl} />
            </div>
          </div>
        </div>
        <div className="gallery-container">
          <div className="gallery-item">
            <div className="image">
              <img src={this.props.photos.room_photos[1].imageUrl} />
            </div>
          </div>
        </div>
        <div className="gallery-container">
          <div className="gallery-item">
            <div className="image">
              <img src={this.props.photos.room_photos[2].imageUrl} />
            </div>
          </div>
        </div>
        <div className="gallery-container">
          <div className="gallery-item">
            <div className="image">
              <img src={this.props.photos.room_photos[3].imageUrl} />
            </div>
          </div>
        </div>
        <div className="gallery-container">
         <div className="gallery-item">
            <div className="image">
              <img src={this.props.photos.room_photos[4].imageUrl} />
            </div>
          </div>
        </div>
      </div>

Answer 1

您将选择器设置为错误，.image img:first-child表示img是每个.images div的第一个子元素，这就是为什么要为所有图像设置边框半径的原因，所以开始从父类.container的div开始，找到其第1，第3和第5个子对象，然后在这些子div中为图像添加边框

因此请尝试使用此

：

/* Select every other div item starting with first */
.container .gallery-container:nth-child(odd) .image img{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

希望它能起作用。

Answer 2

您可以尝试以下方法：

考虑到您需要odd CSS已有一个名为'nth-child（）`的属性用于nth-child()。

在您的情况下，参数为odd，只需将其传递给父类，即可看到galary-container为该类选择nth-child()，您也可以自由使用它的后继。

.gallery-container:nth-child(odd) img {
  display: inline-block;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

<div class="container">
  <div class="gallery-container w-2 h-2">
    <div class="gallery-item">
      <div class="image">
        <img src="http://placekitten.com/201/201" />
      </div>
    </div>
  </div>
  <div class="gallery-container">
    <div class="gallery-item">
      <div class="image">
        <img src="http://placekitten.com/301/301" />
      </div>
    </div>
  </div>
  <div class="gallery-container">
    <div class="gallery-item">
      <div class="image">
        <img src="http://placekitten.com/201/201" />
      </div>
    </div>
  </div>
  <div class="gallery-container">
    <div class="gallery-item">
      <div class="image">
        <img src="http://placekitten.com/301/301" />
      </div>
    </div>
  </div>
  <div class="gallery-container">
    <div class="gallery-item">
      <div class="image">
        <img src="http://placekitten.com/201/201" />
      </div>
    </div>
  </div>
</div>

Answer 3

$('#student_update_form').on('submit', function(event) {

    event.preventDefault();

        var id = $("#element_id").val();
        alert(id);

});

用于选择器位置。

类型n，第一个孩子不能正常工作

3 个答案: