深度应用CSS伪类选择器实现隔行变色
最近的项目要求在不改变HTML布局结构的情况下,实现一行多列和隔行渐变的效果,HTML结构如下:
<ul class="box box-2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
资浅前端攻城狮的废话篓
最近的项目要求在不改变HTML布局结构的情况下,实现一行多列和隔行渐变的效果,HTML结构如下:
<ul class="box box-2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
今天的项目中需要用到: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来实现的《分享效果》代码。
效果预览:点击预览
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选择器(一)
1、:first-child
:first-child是用来选择某个元素的第一个子元素,比如我们这里的这个demo,你想让列表中的"1"具有与从不同的样式,我们就可以使用:first-child来实现:
.demo li:first-child {color:#f00;}
在没有出现这个选择器之前,大家都是给li单独加一个样式来控制,虽然效果一样,但是代码量和复用性不尽如人意。
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选择器的选择方法:
相信看到这里,上面的问题应该也已经有了些眉目了。下面来分别介绍一下这些选择器的使用方法,因为内容很多。所以分为两篇文章进行介绍。