DIV+CSS教程
用css3选择器给你要的第几个元素添加不同样式方法
所属栏目：　时间：　来源：　作者：yecha　点击：
很多时候,我们写网页样式时候会遇到如下面图这种的, 第4个li下面有一行虚线什么的,这样循环,那么,如何很方便的用css实现呢!我们写的html代码 实例如下:&ul&class=&list&&
&&&&&li&&a&href=&#&&１·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&２·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&３·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&４·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&５·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&６·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&７·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&８·这里是一流资源网信息标题&/a&&/li&
&/ul&效果如图:下面我们来了解一下css选择器里面的几个:only-childp:only-child选择属于其父元素的唯一子元素的每个 &p& 元素。3:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 &p& 元素。3:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。3:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 &p& 元素的每个 &p& 元素。3:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。3:last-childp:last-child选择属于其父元素最后一个子元素每个 &p& 元素。3:first-childp:first-child选择属于父元素的第一个子元素的每个 &p& 元素。我们可以使用&:nth-child(n) &来自动判断第4个css代码如下&style&
.list&li:nth-child(4n){&border-bottom:1px&dashed&#}&/*4n就是4的倍数都加这个样式*/
&/style&则效果如图!当然,上面我介绍了一堆选择器,使用方法都差不多,例如 要给第一句加样式,则可以这样&style&
.list&li:first-child{&border-bottom:1px&dashed&#}&/*first-child就是第一个元素*/
&/style&其他用法也是一样的! 大家需要的就学习一下吧 下面给大家个演示!
请站长喝杯咖啡？
站长一直坚持白天工作、晚上熬夜更新素材，付出了巨大的精力和时间，其中的辛酸难以言述。坚持免积分、免登录、无任何限制下载！如果本站素材对你有用，不妨考虑请站长喝杯咖啡鼓励一下！
你应该也喜欢这些吧
给个评价吧
学习最多的
最近更新的
2014全新改版上线
2013全新改版上线&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！9545人阅读
前端（17）
JqueryMobile使用心得（4）动态添加元素css丢失的终极解决办法
&& & &在Jquerymoblie的使用过程中，动态添加元素后css丢失。
&& & &这个问题在之前JqueryMobile使用心得（3）中我已经说明了其原因（因为页面标签首先经过jquery.mobile-1.0a2.min.js的处理，添加了许多标签，然后再用css布局），并且给出了一种解决方法：动态加载jquery.mobile-1.0a2.min.js。
&& & &但是经过测试，上面这种方法并不好。首先异步加载造成用户可以看到没有加载JS的页面，并且JS加载过一次后，如果再要动态添加新元素的话，就意味着多次加载JS文件，显示问题先不说，这效率也堪忧。
&& & &因此必须提出新方法。
&& & &新方法有两个，调用JS的顺序与普通方式相同，都别动态添加JS。
一是将按照jquery.mobile-1.0a2.min.js处理过后的样式，来动态添加元素。jquery.mobile-1.0a2.min.js处理过后的样式可以通过chrome浏览器的审查元素功能看到。这个办法的缺点很明显：添加了很多奇怪的标签。
一般情形下动态添加元素：
onelist = &&li&&img src='stylesheets/images/file_icon/& + SwitchIcon($obj[i].wext) + &' class='ui-li-icon'/&&a href='#' &;
if($obj[i].wtype == &dir&){//文件夹
onelist += &onclick=\&GetShowMyList(\'& + $obj[i].wid + &\')\&&& + $obj[i].wname +&&/a&&span class='ui-li-count'&& + CountSize($obj[i].wsize) + &&/span&&a href='dialog/operatefile.html'
&操作&/a&&/li&&;
}else{//非文件夹直接下载
onelist += &onclick=\&download(\'& + $obj[i].wid + &\')\&&& + $obj[i].wname +&&/a&&span class='ui-li-count'&& + CountSize($obj[i].wsize) + &&/span&&a href='dialog/operatefile.html'
&操作&/a&&/li&&;
按照jquery.mobile-1.0a2.min.js处理过后的样式，来动态添加元素：
onelist = &&li class='ui-li-has-icon ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-btn-up-c' role='option' tabindex='0' data-theme='c'&& +
&&&div class='ui-btn-inner'&& +
&&&div class='ui-btn-text'&& +
&&&img class='ui-li-icon ui-li-thumb' src='stylesheets/images/file_icon/& + SwitchIcon($obj[i].wext) + &' /&& +
&&&a class='ui-link-inherit' href='#' &;
if($obj[i].wtype == &dir&){//文件夹
onelist += &onclick=\&GetShowMyList(\'& + $obj[i].wid + &\')\&&& + $obj[i].wname +&&/a&& +
& &&span class='ui-li-count ui-btn-up-c ui-btn-corner-all'&& + CountSize($obj[i].wsize) + &&/span&& +
& &&a class='ui-li-link-alt ui-btn ui-btn-up-c' href='dialog/operatefile.html' title='操作' data-theme='c'&& +
& &&span class='ui-btn-inner'&& +
& & &&span class='ui-btn-text'&&/span&& +
& & &&span class='ui-btn ui-btn-up-d ui-btn-icon-notext ui-btn-corner-all ui-shadow' data-theme='d'&& +
& & & &&span class='ui-btn-inner ui-btn-corner-all'&& +
& & & & &&span class='ui-icon ui-icon-gear ui-icon-shadow'&&/span&& +
& & & &&/span&& +
& & &&/span&& +
& &&/span&& +
& &&/a&&/div&&/div&&/li&&;
}else{//非文件夹直接下载
onelist += &onclick=\&download(\'& + $obj[i].wid + &\')\&&& + $obj[i].wname +&&/a&& +
& &&span class='ui-li-count ui-btn-up-c ui-btn-corner-all'&& + CountSize($obj[i].wsize) + &&/span&& +
& &&a class='ui-li-link-alt ui-btn ui-btn-up-c' href='dialog/operatefile.html' title='操作' data-theme='c'&& +
& &&span class='ui-btn-inner'&& +
& & &&span class='ui-btn-text'&&/span&& +
& & &&span class='ui-btn ui-btn-up-d ui-btn-icon-notext ui-btn-corner-all ui-shadow' data-theme='d'&& +
& & & &&span class='ui-btn-inner ui-btn-corner-all'&& +
& & & & &&span class='ui-icon ui-icon-gear ui-icon-shadow'&&/span&& +
& & & &&/span&& +
& & &&/span&& +
& &&/span&& +
& &&/a&&/div&&/div&&/li&&;
瞧这多了多少代码啊！不过这也是JueryMobile UI前端实际最终处理的代码量。
方法二：refresh
其实JueryMobile 中早就封装了refresh方法。你只需要对新添加的元素节点refresh一下就可以了。
&例如:&$(&#节点名&).listview(&refresh&);
还是刚才那个函数，采用普通的动态添加元素方法，最后加个refresh就搞定了。
function ShowMyListOK(){//处理根目录文件列表函数
if( $glb_result == &&){
alert(&返回为空！请重新登录！&);
//alert(&成功： &+$glb_result);
$(&#wlist&).empty();
var $obj = jQuery.parseJSON($glb_result);
var onelist = &&;
$.each( $obj, function(i, n){
if( $obj[i].wname != &&){
& &onelist = &&li&&img src='stylesheets/images/file_icon/& + SwitchIcon($obj[i].wext) + &' class='ui-li-icon'/&&a href='#' &;
if($obj[i].wtype == &dir&){//文件夹
onelist += &onclick=\&GetShowMyList(\'& + $obj[i].wid + &\')\&&& + $obj[i].wname +&&/a&&span class='ui-li-count'&& + CountSize($obj[i].wsize) + &&/span&&a href='dialog/operatefile.html'
&操作&/a&&/li&&;
}else{//非文件夹直接下载
onelist += &onclick=\&download(\'& + $obj[i].wid + &\')\&&& + $obj[i].wname +&&/a&&span class='ui-li-count'&& + CountSize($obj[i].wsize) + &&/span&&a href='dialog/operatefile.html'
&操作&/a&&/li&&;
$(&#wlist&).append(onelist);
$(&#wlist&).listview(&refresh&);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：60162次
排名：千里之外
原创：26篇
(1)(1)(3)(3)(4)(6)(1)(3)(4)前一阵子写demo的时候遇到这样一个问题，就是给元素添加css3或者jquery动画时，在动画结束前不能准确取到元素的css属性。
1. css3动画讨论
先看代码：
&div id="hehe"&&/div&
&button class="change"&change&/button&
&button class="get"&get&/button&
width: 100px;
height: 100px;
padding: 10px;
background: red;
-webkit-transition: all 10s ease-out;
-moz-transition: all 10s ease-out;
-o-transition: all 10s ease-out;
transition: all 10s ease-out;
$(document).ready(function() {
$('.change').click(function() {
$('#hehe').width(400);
$('.get').click(function() {
console.log($('#hehe').width());
代码很简单。我们给hehe这个div添加了红色的背景色，并且使用了css3里的动画平滑效果css3 trasition（css3 trasition的使用方法可以参考这篇文章：，写的很详细）。也就是说当hehe发生诸如宽高，背景或者是字体等css属性变化时候，会有ease-out（减速）平滑过渡效果，效果持续10秒。比如说我们点击change按钮，hehe的宽度会消耗10s的时间，慢慢增加到400px，产生动画效果。
问题来了：在动画进行过程中，我单击get按钮，控制台输出的hehe宽度是多少？
一开始我以为是400，因为点击change的时候，审查元素看到"&div id="hehe" style="width: 400"&&/div&"。答案是否定的，我们得到的是动画进行过程中点击时刻hehe的宽度。
我们修改下console的代码: &
console.log($('#hehe').css('width');
这下我们看到在整个动画过程中，我们点击get，得到的都是400px。这说明jquery里面的width()是实时获取元素宽度的，而css('width')只是单纯的获取元素的css值，因为也是带单位的。
2.jquery动画讨论
jquery动画就比较好理解了。我们去掉css3 transition的css代码，用jquery的animate来代替。
$(document).ready(function() {
console.log($('#hehe').width());
$('.change').click(function() {
$('#hehe').animate({width: "400px"}, 10000);
$('.get').click(function() {
console.log($('#hehe').width());
由于jquery的动画实际上是动态的给元素添加style样式，所以无论我们是用width()还是css('width')来获取hehe的宽度都是动态变化的。不过也有一点不同，使用width得到的宽度是没有单位px的，而且都是整数；但是使用css('width')获得的宽度是带单位的，并且小数点后面位数很长。
讨论了这么多，其实关键就是要告诉大家，在使用动画的时候，如果立刻去获取还在变化中的css属性，尤其是宽高，很容易出现问题，必须等到动画结束后在去取这些元素的属性。或者你可以指定需要动画效果的css属性。打个比方，你要获得动画中的宽高，而实际上你想要的动画效果只是背景颜色的变化，那么你在写css3 transition的时候就可以这么写
-webkit-transition: background .7s ease-
-moz-transition: background .7s ease-
-o-transition: background .7s ease-
transition: background .7s ease-
这样动画效果只会表现在背景色，而宽高是不会动态变化了。
同样的，对css3动画中的另外两个效果transform（）和animation（）也做了测试，发现跟transition是一样的，动画过程中元素属性都是动态变化的，甚至在运用animation的时候，用css('width')这样得到的宽度也是变化的了。感兴趣的同学可以去试试。
因此我们在运用css3动画的时候还需要多多注意动画带来的影响。
阅读(...) 评论()