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

时间:2020-06-19 03:29:13

标签: html css reactjs

我正在尝试在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>

3 个答案:

答案 0 :(得分: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;
}

希望它能起作用。

答案 1 :(得分:0)

您可以尝试以下方法:

考虑到您需要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>

答案 2 :(得分:0)

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

    event.preventDefault();

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

});

用于选择器位置。

相关问题