nth-of-type和nth-child区别

nth-of-type会忽略其它标签的顺序而按照标签自身种类的顺序进行筛选
nth-child是按照所有类型标签的所谓整体队列进行排序筛选，也就是说不论你是h1还是p标签，使用这个属性你要遵循在DOM树中的顺序来进行操作

网站常用效果展开查看更多

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站常用效果展开查看更多</title>
<script src=".js/jquery.js"></script>
<style>
  .sec{
    width: 100%; 
    max-width: 640px; 
    min-width: 320px; 
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
  }

  .poster{ 
    margin-bottom:.3215rem;
  }
  .poster-list img{ 
    width:100%;
  }
  .poster-list .poster-txt{
    position: relative;
    overflow: hidden;
    transition: height 0.24s;
  }
  .poster-list .poster-txt.xg:after{
    content: "";
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 4rem;
    background: -moz-linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    background: -webkit-linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  }
  .poster-btn{ 
    outline:none;
    display: block;
    width: 50%;
    line-height: 2;
    margin: .1rem auto;
    color: #666;
    font-size: .28rem;
    text-align: center; 
    background:url(./images/arrowposter.jpg) no-repeat 3rem center;
  }     
  .current-menu { 
    background:url(./images/arrowposterhui.jpg) no-repeat 2.7rem  center;
    content: '';
    display: block;            
  }
</style>
</head>

<body>
<section class="sec">
  <div class="poster">
    <div class="poster-list">
      <div class="poster-txt xg"  style="height: 4.2rem;">
        <p>HTML5的几种存储方式</p>
        <p>html5在引入webStorage之前，主要用cookies.</p>
        <p>web storage<br>
          html5的webstorage 分两种：LocalStorage 和SessionStorage，两者的差别主要在生命周期不同。</p>
        <p>LocalStorage<br>
          LocalStorage用于持久化的本地存储，存储资料在客户端（client）的浏览器上，除非主动删除数据，否则数 据是永远不会过期的。LocalStorage使用键值对的方式进行存储，存储的方式只能是字符串。存储内容可以有图片、json、样式、脚本等只要可以序列化为字符串的。</p>
        <p>localstorage API基本使用方法：</p>
        <p>使用localStorage.setItem(key,value)设置数据<br>
      </div>
      <div class="poster-btn"><a href="javascript:void(0);">展开更多</a></div>
    </div>
  </div>
  <script>
        $(function(){
            $(".poster-btn").click(function(){
                if ($(this).text() == "展开更多") {
                    $(this).text("收起");
                    $(this).siblings(".poster-txt").removeClass("xg").css("height","auto");
                    $(this).addClass('current-menu')
                }else{
                    $(this).text("展开更多");
                    $(this).siblings(".poster-txt").addClass("xg").css("height","4.2rem");
                    $(this).removeClass('current-menu')
                }
            });
        })
    </script> 
</section>
</body>
</html>

最后编辑于：2020.08.06 15:01:13