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>
网友评论