如何在CSS中用nth-child制作selectchilddiv？

Question

我要select.aboutUsItem里面的#aboutUs。我做错什么了？这是我的代码：

#aboutUs .aboutUsItem {
    background-color: #e18686;
    padding: 30px;
    text-align: left;
    min-height: 362px;
    margin-top: 40px;
    border-radius: 65px 18px 65px 18px;
}
#aboutUsItems .container .row .col-md-3 >.aboutUsItem:nth-child(2) {
    border-radius: 0px;
}

<section id="aboutUs">
  <div class="container">
      <div class="row">
          <div class="col-md-3 col-lg-3">
              <div class="aboutUsItem redBg">
                      <p><i class="fa fa-check"></i></p>
                      <p><strong>7/24 Teknik Destek</strong></p>
                      <p>
                          Sadece Ticimax'ta olan 7/24
                          telefon ve ticket desteği ile
                          kesintisiz hizmet alın. Ticimax
                          Akademi'de her hafta ücretsiz
                          sınıf ve uygulamalı eğitimlerimize katılın.
                      </p>
              </div>
          </div>
          <div class="col-md-3 col-lg-3">
              <div class="aboutUsItem purpleBg">
                  <p><i class="fa fa-check"></i></p>
                  <p><strong>7/24 Teknik Destek</strong></p>
                  <p>
                      Sadece Ticimax'ta olan 7/24
                      telefon ve ticket desteği ile
                      kesintisiz hizmet alın. Ticimax
                      Akademi'de her hafta ücretsiz
                      sınıf ve uygulamalı eğitimlerimize katılın.
                  </p>
              </div>
          </div>
          <div class="col-md-3 col-lg-3">
              <div class="aboutUsItem greenBg">
                  <p><i class="fa fa-check"></i></p>
                  <p><strong>7/24 Teknik Destek</strong></p>
                  <p>
                      Sadece Ticimax'ta olan 7/24
                      telefon ve ticket desteği ile
                      kesintisiz hizmet alın. Ticimax
                      Akademi'de her hafta ücretsiz
                      sınıf ve uygulamalı eğitimlerimize katılın.
                  </p>
              </div>
          </div>
          <div class="col-md-3 col-lg-3">
              <div class="aboutUsItem orangeBg">
                  <p><i class="fa fa-check"></i></p>
                  <p><strong>7/24 Teknik Destek</strong></p>
                  <p>
                      Sadece Ticimax'ta olan 7/24
                      telefon ve ticket desteği ile
                      kesintisiz hizmet alın. Ticimax
                      Akademi'de her hafta ücretsiz
                      sınıf ve uygulamalı eğitimlerimize katılın.
                  </p>
              </div>
          </div>
      </div>
  </div>
</section>

Answer 1

我不确定问题到底是什么；但是，我确实在您的 CSS、

中看到了

#aboutUs .aboutUsItem {
    background-color: #e18686;
    padding: 30px;
    text-align: left;
    min-height: 362px;
    margin-top: 40px;
    border-radius: 65px 18px 65px 18px;
}
#aboutUsItems .container .row .col-md-3 >.aboutUsItem:nth-child(2) {
    border-radius: 0px;
}

在第二个声明中通过元素 id 引用 aboutUsItems，而在第一个声明中通过 CSS class 名称引用它（.aboutUsItem vs #aboutUsItems) 这可能是你的问题。

我也没有在您的 HTML 中看到 aboutUsItems id 的任何用法。

Answer 2

你犯了两个错误：

在你的第二个 css selection 中，它应该是 #aboutUs 而不是 #aboutUsItems。
您可能想要 select 第二个 .col-md-3 并更改其 .aboutUsItem。

#aboutUs .aboutUsItem {
  background-color: #e18686;
  padding: 30px;
  text-align: left;
  min-height: 362px;
  margin-top: 40px;
  border-radius: 65px 18px 65px 18px;
}

#aboutUs .container .row .col-md-3:nth-child(2) .aboutUsItem {
  border-radius: 0px;
}

<section id="aboutUs">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-lg-3">
        <div class="aboutUsItem redBg">
          <p><i class="fa fa-check"></i></p>
          <p><strong>7/24 Teknik Destek</strong></p>
          <p>
            Sadece Ticimax'ta olan 7/24
            telefon ve ticket desteği ile
            kesintisiz hizmet alın. Ticimax
            Akademi'de her hafta ücretsiz
            sınıf ve uygulamalı eğitimlerimize katılın.
          </p>
        </div>
      </div>
      <div class="col-md-3 col-lg-3">
        <div class="aboutUsItem purpleBg">
          <p><i class="fa fa-check"></i></p>
          <p><strong>7/24 Teknik Destek</strong></p>
          <p>
            Sadece Ticimax'ta olan 7/24
            telefon ve ticket desteği ile
            kesintisiz hizmet alın. Ticimax
            Akademi'de her hafta ücretsiz
            sınıf ve uygulamalı eğitimlerimize katılın.
          </p>
        </div>
      </div>
      <div class="col-md-3 col-lg-3">
        <div class="aboutUsItem greenBg">
          <p><i class="fa fa-check"></i></p>
          <p><strong>7/24 Teknik Destek</strong></p>
          <p>
            Sadece Ticimax'ta olan 7/24
            telefon ve ticket desteği ile
            kesintisiz hizmet alın. Ticimax
            Akademi'de her hafta ücretsiz
            sınıf ve uygulamalı eğitimlerimize katılın.
          </p>
        </div>
      </div>
      <div class="col-md-3 col-lg-3">
        <div class="aboutUsItem orangeBg">
          <p><i class="fa fa-check"></i></p>
          <p><strong>7/24 Teknik Destek</strong></p>
          <p>
            Sadece Ticimax'ta olan 7/24
            telefon ve ticket desteği ile
            kesintisiz hizmet alın. Ticimax
            Akademi'de her hafta ücretsiz
            sınıf ve uygulamalı eğitimlerimize katılın.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

如何在CSS中用nth-child制作selectchilddiv？

How to make select child div with nth-child in CSS?

html

css