Question

我正在尝试使用不同的时间间隔来制作多米诺骨牌效果的动画。

这是我的代码

    #portfolioContent {
    height:100%;
    width:100%;
    float:left;

    h1 {
        @include header;    
    }

    .portfolioBox {
        height:350px;
        width:300px;
        position:relative;
        margin:15px 10px 30px 10px;
        float:left;
        border-radius:10px;
        position:relative;
        animation: swing 1s ease-in-out 1,
        fadeIn 1s ease-in-out 1;

            img {
                border-radius:10px;
            }

            &:hover #portfolioBoxRollOver {
                border:30px solid map-get($colorMap, bannerColor);
                opacity:.8;
            }

            &:hover #portfolioTitle {

                color:map-get($colorMap, bannerColor);
            }
        }

        #portfolioBoxRollOver {
            position:absolute;
            height:300px;
            width:100%; 
            border:0px solid black;
            opacity:0;
            border-radius:10px;
            box-sizing:border-box;
            transition:all .1s ease-in-out;
            }

        #portfolioTitle {
            position:absolute;
            height:50px;
            text-align:center;
            background-color:#CCC;
            bottom:0px;
            width:100%;
            line-height:50px;
            border-radius:0px 0px 10px 10px;
            color:map-get($colorMap, headerColor);
            }
}

由于某种原因.portfolioBox：nth-child（1）{animation-delay：2s;}选择每个投资组合框而不是第一个。我做错了什么？

我甚至尝试使用&:nth-child(1) {animation-delay:2s;}

在sass中嵌套.portfolioBox

以下是请求的HTML＆gt;＆gt;

<div id="mainContent">
        <div id="portfolioContent">
        <h1>Portfolio</h1>
            <a href="#">
            <div class="portfolioBox">
            <div id="portfolioBoxRollOver"></div><!-- end of portfolioBoxRollOver-->
                <img src="images/bindy_site.jpg" width="300" height="300" alt=""/>
            <div id="portfolioTitle">
        <h2>Bindy's Bicycle</h2>
              </div><!-- end of portfolioTitle-->
           </div><!-- end of portfolioBox--> </a>
            <a href="#">
            <div class="portfolioBox">
             <div id="portfolioBoxRollOver"></div><!-- end of portfolioBoxRollOver-->
            <img src="images/sellwood_podiatry_site.jpg" width="300" height="300" alt=""/>
            <div id="portfolioTitle">
        <h2>Sellwood Podiatry</h2>
              </div><!-- end of portfolioTitle-->
            </div><!-- end of portfolioBox--></a>
            <a href="#">
            <div class="portfolioBox">
             <div id="portfolioBoxRollOver"></div><!-- end of portfolioBoxRollOver-->
                <img src="images/st_cecilia_site.jpg" width="300" height="300" alt=""/>
            <div id="portfolioTitle">
        <h2>St. Cecilia Website</h2>
              </div><!-- end of portfolioTitle-->
         </div><!-- end of portfolioBox--></a> 
            <a href="#">
            <div class="portfolioBox">
             <div id="portfolioBoxRollOver"></div><!-- end of portfolioBoxRollOver-->
                <img src="images/sennheiser_website.jpg" width="300" height="300" alt=""/>
                <div id="portfolioTitle">
        <h2>Sennheiser Website</h2>
                </div><!-- end of portfolioTitle-->
           </div><!-- end of portfolioBox--></a>
            <a href="#">
            <div class="portfolioBox">
             <div id="portfolioBoxRollOver"></div><!-- end of portfolioBoxRollOver-->
                <img src="images/portland_chess_club_site.jpg" width="300" height="300" alt=""/>
                <div id="portfolioTitle">
        <h2>Portland Chess Club</h2>
                </div><!-- end of portfolioTitle-->
            </div><!-- end of portfolioBox--></a>
            <a href="#">
            <div class="portfolioBox">
             <div id="portfolioBoxRollOver"></div><!-- end of portfolioBoxRollOver-->
                <img src="images/bud_tenders_site.jpg" width="300" height="300" alt=""/>
                <div id="portfolioTitle">
        <h2>Bud Tenders</h2>
                </div><!-- end of portfolioTitle-->
            </div><!-- end of portfolioBox--></a>
        </div><!-- end of portfolioContent-->
    </div><!-- end of mainContent-->

Answer 1

试

.portfolioBox {
    height:350px;
    width:300px;
    position:relative;
    margin:15px 10px 30px 10px;
    float:left;
    border-radius:10px;
    position:relative;
    animation: swing 1s ease-in-out 1,
    fadeIn 1s ease-in-out 1;
    &:first-child{
      /*Code Here*/
    }
 }

还可以使用＆amp;：nth-child（n）来选择其他元素。

Answer 2

.portfolioBox：nth-child（1）实际上正在选择.portfolioBox的第一个子节点，在你的情况下它不存在，所以它必须默认选择.portfolioBox。你可以随时使用

h1 .portfolioBox

作为选择器规则。这完全取决于你想要实现的目标。

如果要始终选择.portfolioBox类的第一个实例，则需要设置.portfolio的所有实例的样式，然后对除第一个实例以外的所有实例应用不同的样式，如下所示：

使用.portfolioBox：

应用于所有元素

.portfolioBox { styles }

现在为.portfolioBox的第一个实例的所有兄弟姐妹应用不同的样式来“撤消”这个样式：

.portfolioBox ~ .portfolioBox { styles }

Answer 3

由于某种原因.portfolioBox：nth-child（1）{animation-delay：2s;}选择每个投资组合框而不是第一个。我做错了什么？

您认为.portfolioBox:nth-child(1)会选择第一个带有类.portfolioBox的每个显示元素。 nth-child的问题是它选择了作为其父级的第n个子元素的每个匹配元素。

<div id="parent">
  <p class="someChild">Content1</p> <!-- this is always the first child -->
  <div class="portfolioBox">Content2</div>  <!-- this is always the second child -->
</div>
<!-- so .portfolioBox:nth-child(1) won't match here, as the first child is not -->
<!-- of class .portfolioBox -->

在您的示例中，您具有以下HTML结构：

<div id="portfolioContent">
  <h1>Portfolio</h1>
  <a href="#">
    <div class="portfolioBox">...</div>
  </a>
  <a href="#">
    <div class="portfolioBox">...</div>
  </a>
  <!-- ... -->
</div>

因此，通过说.portfolioBox:nth-child(1)，您可以选择类.portfolioBox的每个元素，它是其父元素的第一个子元素。在您的示例中，每个.portfolioBox元素的情况都是如此（<a>是父元素。）

解决方案

假设第一个.portfolioBox始终位于其父级的第一个<a>标记中，我们可以尝试选择第一个<a>元素并设置其.portfolioBox的样式：< / p>

#portfolioContent > a:nth-child(2) > .portfolioBox {
  background: yellow;
}

这还不完美，因为我们必须关心第一个<a>元素的位置。目前它是#portfolioContent的第二个孩子，第一个是<h1>。幸运的是，有:nth-of-type - 选择器允许选择<a>类型的第一个子项：

#portfolioContent > a:nth-of-type(1) > .portfolioBox {
  background: green;
}

nth-child选择器不在sass中工作

3 个答案:

解决方案