Question

我想将不同的CSS应用于奇数和偶数div，但我使用的当前代码并不起作用。我只是希望它针对第一个孩子，AKA divs，而不是div的孩子。

＆＃13;

.work-layer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: white;
  height: 100%;
}

.work-container:nth-child(odd) {
  text-align: right;
  padding-right: 100px;
}

.work-container:nth-child(even) {
  text-align: left;
  padding-right: 100px;
}

.name {
  font-size: 3em;
  text-transform: uppercase;
}

.desc {
  font-size: 1.75em;
  width: 40%;
}

.url {
  font-weight: bold;
  font-size: 1.5em;
  color: white;
}

.work-layer {
  height: 300px;
}

.layer-textastic {
  background-color: rgba(0, 133, 255, 1);
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
<div class="work">
  <div class="work-container textastic">
    <div class="work-layer layer-textastic">
      <h1 class="name">Textastic</h1>
      <p class="desc">I made this website as an homage to a great little text editor for iOS known as Textastic</p>
      <a href="#" class="url">jordanbaron.me/Updated-Textastic-Site</a>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您不能将.work-container:nth-child(even)和.work-container:nth-child(odd)分别更改为.work:nth-child(even)和.work:nth-child(odd)。如果这不是您想要的，请使用类似MS涂料的图片发布图片。

Answer 2

使用偶数和奇数的代码工作正常，我想您希望p-Tag中的文本也在右侧，这里的问题是您在类.desc上的宽度为40％。只需添加宽度为100％的div，并向div中的文本添加float（仅适用于奇数.work-container）。

编辑：您可以添加以下3行代码，而不是使用上面的代码（并在代码段中），它具有相同的效果：

.work-container:nth-child(odd) p{
  margin-right: auto;
 }

.work-layer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: white;
  height: 100%;
}

.work-container:nth-child(odd) {
  text-align: right;
  padding-right: 100px;
}

.work-container:nth-child(odd) .inner-desc{
  float: right;
}

.work-container:nth-child(even) {
  text-align: left;
  padding-right: 100px;
}

.name {
  font-size: 3em;
  text-transform: uppercase;
}

.desc {
  font-size: 1.75em;
  width: 100%;
}

.inner-desc{
  width: 40%
}

.url {
  font-weight: bold;
  font-size: 1.5em;
  color: white;
}

.work-layer {
  height: 300px;
}

.layer-textastic {
  background-color: rgba(0, 133, 255, 1);
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
<div class="work">
  <div class="work-container textastic">
    <div class="work-layer layer-textastic">
      <h1 class="name">Textastic</h1>
      <div class="desc">
        <p class="inner-desc">I made this website as an homage to a great little text editor for iOS known as Textastic</p>
      </div>
      <a href="#" class="url">jordanbaron.me/Updated-Textastic-Site</a>
    </div>
  </div>
</div>

如何使用CSS定位奇数和偶数div？

2 个答案: