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

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