css - 我需要什么代码才能只有这些按钮之一？

Question

我只想使用右侧的按钮:

http://cssdeck.com/item/preview/343/css-text-switcher

我需要什么代码才能只拥有该按钮而不是第一个按钮？由于所有后代选择器，我正在苦苦挣扎..

Answer 1

HTML(仅限相关代码):

<nav>
  <ul>
    <li>
      <a href="#">
        <span>Want to learn more?</span>
        <span>Send us an email :)</span>
      </a>
    </li>
  </ul>
</nav>​

CSS(仅限相关代码):

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 30px;
    margin: -15px 0 0 -160px;
    list-style: none;
    font: .75em "lucida grande", arial, sans-serif;
}

a {
    position: absolute;
    width: 150px;
    height: 100%;
    text-decoration: none;
}

a span {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 30px;
}

li a {
    overflow: hidden;
    right: 0;
    color: #fff;
}

li span {
    -webkit-transition: top .3s ease-out;
    -moz-transition: top .3s ease-out;
    -o-transition: top .3s ease-out;
    -ms-transition: top .3s ease-out;
    transition: top .3s ease-out;
}

li span:first-child {
    background: #333;
    top: 0;
}

li span + span {
    background: #39f;
    top: 30px;
}

li a:hover span:first-child {
    top: -30px;
}

li a:hover span + span {
    top: 0;
}

JSFiddle ​