Question

从下面的代码中，我在ul标签内有2个li。这些中的每一个都包含2个div，这两个div都包含在一个锚标签中。 anchor标签是flex容器，div里面是flex项。

一切都很顺利，但我尝试在<a> <li>元素中选择:nth-child(even)元素。我想将以下属性flex-direction: row-reverse;添加到锚点。

无论出于何种原因，他们都没有被选中，我认为这与将div包装在锚标签中的事实有关？

以下代码：

SCSS：

.locals {
  li {
     list-style-type: none;

     a.person {
        display:flex;
        text-decoration: none;

        .bg {
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        & > div:first-child {
            flex: 1;
        }

        & > div:last-child {
            flex: 1;
            padding: 80px 0;

            h2 {
                text-align:center;
                color: $gold;
                font-size:20px;
            }
            p {
                text-align:center;
                color: $gold;
            }
        }
    }
}

 li:nth-child(even) {
     a.person {
         flex-direction: row-reverse;
     }
 }
}

HTML：

<ul class="locals">
    <li>
        <a class="person" href="">
            <div class="bg" style="background-image:url('http://placehold.it/350x150'); ">
            </div>
            <div>
                <h2> Test </h2>
                <p> Test </p>
            </div>
        </a>
    </li>
    <li>
        <a class="person" href="">
            <div class="bg" style="background-image:url('http://placehold.it/350x150'); ">
            </div>
            <div>
                <h2> Test </h2>
                <p> Test </p>
            </div>
        </a>
    </li>

Answer 1

纠正以下内容：

添加遗失的</ul>结束标记。
声明$gold变量。

代码段： （已编译的CSS）

＆＃13;

.locals li {
  list-style-type: none;
}
.locals li a.person {
  display: flex;
  text-decoration: none;
}
.locals li a.person .bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.locals li a.person > div:first-child {
  flex: 1;
}
.locals li a.person > div:last-child {
  flex: 1;
  padding: 80px 0;
}
.locals li a.person > div:last-child h2 {
  text-align: center;
  color: gold;
  font-size: 20px;
}
.locals li a.person > div:last-child p {
  text-align: center;
  color: gold;
}
.locals li:nth-child(even) a.person {
  flex-direction: row-reverse;
}

＆＃13;

<ul class="locals">
  <li>
    <a class="person" href="">
      <div class="bg" style="background-image:url('http://placehold.it/350x150'); ">
      </div>
      <div>
        <h2> Test </h2>
        <p>Test</p>
      </div>
    </a>
  </li>
  <li>
    <a class="person" href="">
      <div class="bg" style="background-image:url('http://placehold.it/350x150'); ">
      </div>
      <div>
        <h2> Test </h2>
        <p>Test</p>
      </div>
    </a>
  </li>
</ul>

＆＃13;

Revised jsFiddle

使用li标签内的nth-child选择弹性项目

1 个答案: