文章关键字 ‘选择器’

小tip:CSS计数器+伪类实现数值动态计算与呈现

2014年12月7日,星期日

内容如题,重在展示,以及开拓眼界,拓宽思路。与通常该调调的文章类似,有demo,有源代码展示,还有必要的截图。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS属性选择器驱动的过滤搜索技术

2013年09月16日,星期一

CSS选择器可以用来实现搜索功能。
以前提过CSS3的选择器结合表单元素可以用来控制元素的显隐,这里,类似的,还是CSS3的选择器,居然可以用来过滤和搜索页面元素。有兴趣就进来看看吧,可能会有启发哦!

阅读全文…

有趣:256个class选择器可以干掉1个id选择器

2012年08月20日,星期一

我突然想起了在微博上看到的一个视频:日本蜜蜂团团围住并热死大黄蜂的那个视频,——虽然小蜜蜂战斗力就是个渣渣,但是,足够多的数量也会搞出一些有趣的现象——热死足以以一敌千的大黄蜂。
但是,在CSS的世界里,居然有类似的“以数量取胜”有趣现象。比方说,这里要展示的:256个级联class选择器 击败 1个id选择器的有趣故事……

阅读全文…

小tip: CSS后代选择器可能的错误认识

2012年03月19日,星期一

本文通过几个简单的实例,介绍在CSS后代选择器上,一些同行可能存在的一些错误认识。虽是短篇,但是源代码展示,必要的demo页面以及效果截图俱全。希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS radio/checkbox单复选框元素显隐技术

2012年01月6日,星期五

我们使用CSS一些特殊的选择器,然后配合单选框以及复选框自带的一些特性,可以实现元素的显示隐藏效果。然后通过一些简单的扩展,我们可以不使用任何JavaScript代码实现类似:自定义的单复选框,“更多”展开与收起效果,选项卡切换效果,或是多级下拉列表效果等等。
本文将通过列举几个简单示例对这一技术做简单介绍。同样的,有demo,有截图,有源代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

jQuery与MooTools库的一些比对

2011年09月28日,星期三


我上大学那会儿从事的项目用的是jQuery,毕业后工作所从事的项目用的是MooTools。很幸运短期内有机会接触两款不同设计风格的优秀的JavaScript库。今天就我自己的一些认识比对下这两个JS框架,更多的是希望大家能够对MooTools这个JS框架有更多的认识。毕竟,大多数从事web前端的人对上手容易的jQuery更熟悉些。

阅读全文…

CSS3选择器:nth-child和:nth-of-type之间的差异

2011年06月21日,星期二

:nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使用这两类选择器。提供几个简单的对比实例页面以表现两者之间的差异,提供源代码展示,提供必要的截图。并附上自己对这两个选择器的一些认识和建议。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

style标签下的CSS代码的显示与实时编辑

2011年03月3日,星期四

本文讲的是如何让一段CSS代码可以在页面上显示,同时有可以修改,更关键的是修改的同时页面上对应元素的样式也跟着改变。文本内容不是很多很长,关键是展示这种不错的技术。跟以往的文章一样,提供demo页面,提供相应的截图以及必要的源代码展示。总之,希望能够对您的学习有所帮助。

阅读全文…

遐想:如果没有IE6和IE7浏览器…

2011年02月24日,星期四

本文其实是篇“不切实际”的YY之文。YY的背景就是IE6/IE7浏览器功德圆满,已经退休回家带孙子了。YY的内容就是此背景下我们前端er们可以做的些有趣且美好的事情。本文内容其实可以换个题目就是: IE6/IE7浏览器不支持前端功能简介。文章主要列举了四个功能,其中两个JavaScript方面的,两个CSS方面的。其实更多的是介绍一些新的技术。

本文各个parts都提供必要的截图,或是文章链接;提供必要的源代码展示;JavaScript部分专门制作了很有喜感的demo页面;CSS部分提供了其他作者制作的相关demo。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

HTML5 drag & drop 拖拽与拖放简介

2011年02月9日,星期三

本文简单介绍了下利用HTML5 drag & drop API非常简单轻松地实现拖拽与拖放效果。提供一些关键术语的讲解,提供简单实用的demo页面,提供必要的源代码展示和效果截图。总之,希望能对您的学习有所帮助。

阅读全文…