2013年5月

:first-child失效的一些疑惑

今天的项目中需要用到:first-child伪类，但是发现fist-child失效，且last-child正常！

W3C中对:first-child伪类的定义是：

:first-child 伪类向元素的第一个子元素添加样式。

检查了一下我的页面结构，类似：

<div class="test">
  <ul>
      <h3>Title</h3>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>
</div>

最后判断可能是因为li标签在ul结构中不是第一个元素，而导致.test li:first-child{border-top:none;}失效，但是我的伪类标签是针对li这个标签来使用的，按照这个伪类的定义，应该和<h3>标签并无关联才对！

最后在不破坏这个页面结构的情况下，只能用:first-of-type伪类来暂时解决这一问题。但是:first-of-type属于CSS3新增的属性，目前不被IE8及以下版本支持。

留存待空闲时候再做研究

CSS3实现超酷分享效果

废话不多说，今天来分享一段通过CSS3来实现的《分享效果》代码。

效果预览：点击预览

HTML部分：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
    <title>CSS3实现超酷分享效果</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"/> 
</head> 
<body> 
<div id="wrapper"> 
        <h3>CSS3实现超酷分享效果</h3> 
        <ul class="social" id="css3"> 
            <li class="delicious"> 
                <a href="http://www.delicious.com/"><strong>Delicious</strong></a> 
            </li> 
            <li class="digg"> 
                <a href="http://digg.com/"><strong>Digg</strong></a> 
            </li> 
            <li class="facebook"> 
                <a href="http://www.facebook.com/"><strong>Facebook</strong></a> 
            </li> 
            <li class="flickr"> 
                <a href="http://www.flickr.com/"><strong>Flickr</strong></a> 
            </li> 
            <li class="linkedin"> 
                <a href="http://www.linkedin.com/"><strong>LinkedIn</strong></a> 
            </li> 
            <li class="reddit"> 
                <a href="http://www.reddit.com/"><strong>Reddit</strong></a> 
            </li> 
            <li class="rss"> 
                <a href="http://feeds2.feedburner.com/marcofolio"><strong>RSS</strong></a> 
            </li> 
            <li class="twitter"> 
                <a href="http://twitter.com/"><strong>Twitter</strong></a> 
            </li> 
        </ul> 
    </div> 
</div> 
</body> 
</html>

CSS部分：

/* BASIC RESET */ 
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;} 

/* HTML ELEMENTS */ 
body { background-image:url("../images/texture.gif"); font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Arial,Tahoma,Verdana,sans-serif; font-size:13px; } 
h3 { clear:both; padding:20px; text-align:center; } 
a { color:#AF7F00; text-decoration:underline; } 
a:hover { text-decoration:none; } 

/* COMMON CLASSES */ 
.break { clear:both; } 

/* WRAPPER */ 
#wrapper { width:800px; margin:40px auto; } 

/* SOCIAL ICONS - GENERAL */ 
.social { list-style:none; margin:30px auto; width:464px; } 
.social li { display:inline; float:left; background-repeat:no-repeat; } 
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } 
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; 
 text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); 
 -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
} 

li.delicious { background-image:url("../images/delicious.png"); } 
li.digg { background-image:url("../images/digg.png"); } 
li.facebook { background-image:url("../images/facebook.png"); } 
li.flickr { background-image:url("../images/flickr.png"); } 
li.linkedin { background-image:url("../images/linkedin.png"); } 
li.reddit { background-image:url("../images/reddit.png"); } 
li.rss { background-image:url("../images/rss.png"); } 
li.twitter { background-image:url("../images/twitter.png"); } 

/* SOCIAL ICONS - CSS3 */ 
#css3:hover li { opacity:0.2; } 

#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms; 
 -moz-transition-property: opacity; -moz-transition-duration: 500ms; } 
#css3 li a strong { opacity:0; 
 -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; 
 -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } 

#css3 li:hover { opacity:1; } 
#css3 li:hover a strong { opacity:1; top:-10px; }

打包下载：

点击下载

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 选择的元素里面没有任何内容。

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