CSS3中新增的nth选择器(二)

接上篇 CSS3中新增的nth选择器(一)
1、:first-child
:first-child是用来选择某个元素的第一个子元素,比如我们这里的这个demo,你想让列表中的"1"具有与从不同的样式,我们就可以使用:first-child来实现:

.demo li:first-child {color:#f00;}

在没有出现这个选择器之前,大家都是给li单独加一个样式来控制,虽然效果一样,但是代码量和复用性不尽如人意。

继续阅读 »

CSS3中新增的nth选择器(一)

CSS3的新增属性确实给开发者带来不少惊喜,但是新增的CSS选择器相比之下没有却没有太火热,今天主要学习的是CSS3新增的选择器:nth选择器,也又称结构选择器。

相信大家一般会用到的选择器无非是:

通配符选择器(*)
元素选择器(E)
类选择器(.classname)
ID选择器(#id)
后代选择器(E F)
群组选择器(selector1,selector2,...,selectorN)

其他的选择器因为IE6不兼容可能会很少用到。

但是大家或许会遇到这样的问题:

<ul> 
    <li>这是测试内容</li> 
    <li>这是测试内容</li><!--这条需要使用红色字体--> 
    <li>这是测试内容</li> 
    <li>这是测试内容</li> 
    <li>这是测试内容</li> 
</ul>

怎么让第二条,用最简单的方法单独实现文字变成红色?咳咳,大家和我一起头脑风暴一下...

现在来介绍一下nth选择器的选择方法:

  1. :fist-child 选择某个元素的第一个子元素;
  2. last-child 选择某个元素的最后一个子元素;
  3. nth-child() 选择某个元素的一个或多个特定的子元素;
  4. nth-last-child() 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
  5. nth-of-type() 选择指定的元素;
  6. nth-last-of-type() 选择指定的元素,从元素的最后一个开始计算;
  7. first-of-type 选择一个上级元素下的第一个同类子元素;
  8. last-of-type 选择一个上级元素的最后一个同类子元素;
  9. only-child 选择的元素是它的父元素的唯一一个了元素;
  10. only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;
  11. empty 选择的元素里面没有任何内容。

相信看到这里,上面的问题应该也已经有了些眉目了。下面来分别介绍一下这些选择器的使用方法,因为内容很多。所以分为两篇文章进行介绍。

生活继续,梦想随行

好吧,我承认我已经很久很久没打理这个网站了。一方面觉着网站越看越无法入目,另一 方面确实是太懒了,有点空余时间基本都堆LOL和日本文化研究上去了,偶尔刷刷微博,穷 得瑟一番感觉这么凑合着过也挺好。

年后看着我妈给我明年准备的红内裤,顿时觉着是时候再出去闯荡一番了,即使不能好男 儿志在四方,怎么着也得攒钱娶房媳妇儿吧。连想带抄的做了一份感觉特牛逼的简历,遍 地撒网似得全国各地飞了许多,很多如同石沉大海,让我感觉浪费了一份特牛逼的简历, 也陆陆续续收到一些回复及橄榄枝。好吧,我又得承认我有选择恐惧症。在几份工作之间 摇摆不定!小钱大师说要帮我做选择,结果被我侃晕了,只好让我跟从内心的选择。嗯, 我又怂了!说服的了别人,却说服不了自己。

或许这些天的求职收获,就是让我将死的前端梦又迎来了第二春,当然,这事儿它不怪我 。每个人都有一个伟大的梦想,有人是妹纸多多,有人是地位显赫,有人是多金帅气。我 居然是能做个前端攻城师,没事发发前端大牛都顶礼舔脚的技术贴得瑟得瑟。活该屌丝撸 管命!但是凭着几年的UI设计师的经验和一些勉强拿得出手的HTML/CSS,强差人意的JS、 JQuery,没有大型前端开发项目经验!实在没有底气去和招聘官谈待遇谈条件。想去一个互联网公司从前端实习生做起,却真心无法想象再去靠父母接济去维持生活会是怎样一个场面,也无法说服自己放弃薪资让我很是心动的工作从头开始。在这个时候总希望能有人能够帮我抉择一条路,一条一路光明的路。可能今年的前端梦又得落的乱棍打死的下场,可能今年我还得继续靠着设计来混口饭吃,可能今年我还是一个似乎什么都懂似乎什么都不懂的网络多面手。但是生活要继续,梦想也应随行!

2013.02.23 凌晨

jQuery选择器应用实例

最近在学习JQuery,目前看到选择器这一章,也实验了几个例子。结果发现经常漏写 $ ,看来得多练习实践。下面是一个展开收缩的例子。很简单,也算是一个起点吧。(实例来自《锋利的jQuery》)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  <title>JQ选择器</title> 
  <script type="text/javascript" src="jquery-1.3.2.js" ></script> 
  <script type="text/javascript">   
        $(function(){ 
            var $category = $("ul li:gt(5):not(:last)"); 
            $category.hide(); 
            var $toggleBtn = $("div.showmore > a"); 
            $toggleBtn.click(function(){ 
                if($category.is(":visible")){ 
                    $category.hide(); 
                    $(".showmore a span").text("显示全部品牌"); 
                    }else{ 
                        $category.show(); 
                        $(".showmore a span").text("精简显示品牌"); 
                        } 
                    return false; 
            }) 
        }); 
  </script> 
  <style> 
    .SubCategoryBox{ width: 500px; text-align: center; min-height: 200px; border: 1px solid #333; margin: 200px auto;} 
    .SubCategoryBox ul{list-style: none;} 
    .SubCategoryBox ul li{ float: left; padding-right: 20px; line-height: 30px;} 
    .SubCategoryBox ul li a{font-size:14px; color: #666; text-decoration: none;} 
    .showmore{width: 120px; height: 25px; margin: 0 auto;} 
    .showmore a{font-size:14px; color: #666; text-decoration: none; line-height: 25px; border: 1px solid #333; padding: 5px;} 
  </style> 
</head> 

<body> 
    <div class="SubCategoryBox"> 
        <ul> 
            <li><a href="#">佳能</a><i>(304000)</i></li> 
            <li><a href="#">索尼</a><i>(213123)</i></li> 
            <li><a href="#">三星</a><i>(232312)</i></li> 
            <li><a href="#">尼康</a><i>(23132)</i></li> 
            <li><a href="#">松下</a><i>(54654)</i></li> 
            <li><a href="#">卡西欧</a><i>(213435)</i></li> 
            <li><a href="#">富士</a><i>(86543)</i></li> 
            <li><a href="#">柯达</a><i>(43536)</i></li> 
            <li><a href="#">宾得</a><i>(56754)</i></li> 
            <li><a href="#">理光</a><i>(45463)</i></li> 
            <li><a href="#">奥林巴斯</a><i>(78342)</i></li> 
            <li><a href="#">明基</a><i>(3456)</i></li> 
            <li><a href="#">爱国者</a><i>(5665)</i></li> 
            <li><a href="#">其他品牌相机</a><i>(7754)</i></li> 
        </ul> 
        <div class="showmore"> 
            <a href="more.html"><span>显示全部品牌</span></a> 
        </div> 
    </div> 
</body> 
</html>

 

CSS3打造3D分页导航

效果预览:

点击预览

HTML:
这个效果用到的HTML结构就相当的简单了,就是一个容器“div#pager”里面放了一些“a”链接标签:

<div id="pager"> 
   <a href="javascript:void(0)"><</a> 
   <a href="javascript:void(0)" class="on">1</a> 
   <a href="javascript:void(0)">2</a> 
   <a href="javascript:void(0)">3</a> 
   <a href="javascript:void(0)">4</a> 
   <a href="javascript:void(0)">5</a> 
   <a href="javascript:void(0)">6</a> 
   <a href="javascript:void(0)">></a> 
 </div>

CSS:

#pager { 
    position:relative; 
    display:block; 
    overflow:visible; 
    display:inline-block; 
    margin:300px 400px; 
} 
#pager a { 
    font:bold 20px/30px Tahoma,Arial; 
    cursor:pointer; 
    text-decoration:none; 
    color:#464646; 
    display:block; 
    float:left; 
    margin-right:1px;
box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,
inset rgba(255,255,255,0.7) 0 2px 0,
inset rgba(255,255,255,0.7) 0 -1px 0,
inset rgba(255,255,255,0.7) 1px 0 0,
inset rgba(255,255,255,0.7) -1px 0 0,
rgba(0,0,0,0.3) 0 3px 0; 
    padding:2px 10px; 
    min-width:10px; 
    text-align:center; 
    position:relative; 
    text-shadow:#fff 0 1px 0; 
    background:#cdcdcd; 
    background:-webkit-gradient(linear,0% 0%,0% 100%,
from(rgba(255,255,255,0.8)),to(rgba(200,200,200,0.9))); 
    background:-webkit-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9)); 
    background:-moz-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9)); 
    background:-ms-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9)); 
    background:-o-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9)); 
} 
#pager a:after { 
    content:''; 
    position:absolute; 
    bottom:-3px; 
    height:100%; 
    display:block; 
    width:100%; 
    left:0; 
    box-shadow:inset rgba(255,255,255,0.2) 1px 0 0,
inset rgba(255,255,255,0.2) -1px 0 0,rgba(0,0,0,0.4) 0 1px 0; 
} 
#pager a:first-child::after { 
    border-radius:500px 0 0 500px; 
} 
#pager a:last-child::after { 
    border-radius:0 50px 50px 0; 
} 
#pager a.on:after { 
    bottom:-1px; 
} 
#pager a:before { 
    content:''; 
    position:absolute; 
    top:1px; 
    height:100%; 
    box-shadow:rgba(0,0,0,0.4) 0 3px 0; 
    width:1px; 
    display:block; 
    background:rgba(0,0,0,0.4); 
    right:-1px; 
} 
#pager a:last-child::before { 
    display:none !important; 
} 
#pager a:first-child { 
    border-radius:50px 0 0 50px; 
} 
#pager a:last-child { 
    border-radius:0 50px 50px 0; 
} 
#pager a:hover { 
    box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,
inset rgba(255,255,255,0.7) 0 2px 0,
inset rgba(255,255,255,0.7) 0 -1px 0,
inset rgba(255,255,255,0.7) 1px 0 0,
inset rgba(255,255,255,0.7) -1px 0 0,
inset rgba(255,255,255,1) 0 0 15px,
rgba(0,0,0,0.2) 0 3px 0; 
} 
#pager a:active { 
    box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,
inset rgba(0,0,0,0.3) 1px 0 0px,inset rgba(0,0,0,0.3) -1px 0 0px,
inset rgba(255,255,255,0.7) 0 2px 0,
inset rgba(255,255,255,0.7) 0 -1px 0,
inset rgba(0,0,0,0.1) 0 0 15px,rgba(0,0,0,0.2) 0 2px 0; 
    top:1px; 
    text-shadow:#fff 0 0 15px; 
} 
#pager a:active:after { 
    bottom:-2px; 
} 
#pager a:active:before { 
    box-shadow:rgba(0,0,0,0.4) 0 2px 0; 
    top:0px; 
} 
#pager a.on { 
    box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,
inset rgba(0,0,0,0.3) 1px 0 0px,
inset rgba(0,0,0,0.3) -1px 0 0px,
inset rgba(255,255,255,0.7) 0 2px 0,
inset rgba(255,255,255,0.7) 0 -1px 0,
inset rgba(0,0,0,0.1) 0 0 15px,
rgba(0,0,0,0.3) 0 1px 0; 
    top:2px; 
    text-shadow:#fff 0 0 15px; 
} 
#pager a.on:before { 
    box-shadow:rgba(0,0,0,0.4) 0 3px 0; 
    top:-1px; 
} 
#pager a.on:active:after { 
    bottom:-1px; 
}

jQuery:

$(document).ready(function(){
   $("#pager a").click(function(){
      $(this).addClass("on").siblings().removeClass("on");
      });
  });

jQuery主要是用来实现“active”效果。

文章来源自:http://www.w3cplus.com 根据个人理解程度有删减。