续接上次怎样使用CSS3伪类（三），这次继续介绍目标伪类（Target Pseudo-Class）、UI元素状态伪类（UI Element States Pseudo-Class）和否定式伪类（Negation Pseudo-Class）。
继续阅读文章
怎样使用CSS3伪类（四）
回复
标签归档：css3
怎样使用CSS3伪类（三）
续接上次怎样使用CSS3伪类（二），这次继续介绍结构伪类（Structural Pseudo-Class）。
继续阅读文章
怎样使用CSS3伪类（二）
一周过得很快，该系列上周开了个头怎样使用CSS3伪类（一） ，这次开始向大家介绍结构伪类（Structural Pseudo-Class）。
结构伪类（Structural Pseudo-Class）
根据W3C的定义：
… permit selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or combinators.
这意味着基于文档中元素的位置，我们可以动态的选择内容。所以，我们先从文档的根部:root开始。
E:root
:root用来选择页面的根元素。一般使用该选择器一定会选中的是，我想你已经猜到了，。例如：
:root { background-color: #fcfcfc; }
但是，这样却几乎没有什么意义，用html来代替root会更加易懂。
继续阅读文章
怎样使用CSS3伪类（一）
又是新的一周了，这周开始一个全新的系列——怎样使用CSS3伪类。
伪类（pseudo class），对于大多数网页设计人员来说，是一个软肋。常常会对伪类产生各种各样的困惑，关于伪类，如果使用得当的话会达到事半功倍的效果。而在最新的CSS3标准中，列出了16种伪类，为我们提供了在新标准中强大的选择方法。
首先还是向大家介绍一下CSS中伪类的历史渊源吧。
伪类简史
CSS1标准完成于1996年，包括了一些直到今天还几乎天天使用的伪类。例如：
:link
:visited
:hover
:active
这些状态可以使用于任意元素，但是通常用于<a>，从此以后便使用伪类这个叫法。你肯定难以想象，这些还早于HTML4标准的制定，而HTML4是在1997年的12月才发布。
CSS2降临
CSS2紧跟着CSS1的步伐，于两年后的1998年5月发布。随着令人期待的position一起出现的伪类有：
:first-child
:lang()
有多种方法来表示文件的语言，在HTML5中，可以这样定义<html lang=”en”>。当你的站点是随着不同的国家而动态变换语言的时候，现在你可以使用:lang(en)。
你可能已经使用过这个选择方法。通常用来添加或者移除一个列表中第一个元素的边框（border），然而在CSS2中却没有与此相对应的:last-child，直到CSS3中这两个兄弟才得以相见。
为什么要使用伪类
伪类能够使你的内容风格动态变化，这是使得如此有用的原因之一。在<a>标签中，当用户与链接交互时可以有不同的状态显示。而新的伪类可以使文档内容基于其位置或者状态而动态变换形式。
在CSS Proposed Recommendation中,一共介绍了16种新的伪类，共分为四种：结构伪类，UI元素状态伪类，目标伪类，否定式伪类。
这就算是本系列的开篇吧，待我下次一一详细介绍这16个新伪类，敬请期待。
响应式设计介绍
网络对于很多人来说已经是不可或缺的生活中的一部分。你可能有一台笔记本，一部手机，一个平板电脑，它们拥有不同的屏幕分辨率。现在屏幕的分辨率宽度，小到240px，大到2560px。用户不单单使用桌面电脑来浏览网页，所以传统的固定宽度设计已经不能满足需求了。这就必须使得网页能够随着屏幕的变化而适应变化。
可能你会说，可以使用fluid design。虽然它可以随着显示屏幕宽度的大小进行自适应，但是当这种设计在手机终端显示或者当宽度小于某个数值后，其显示效果就差强人意了。大家可以看这个Demo的效果，当然你需要调整浏览器的窗口大小。基于此，Responsive web design就应运而生了。
第一次关注Responsive web design是在农历年后不久，最初是看到A List Apart上面的这篇文章Responsive web design。看过之后，一直纠结这个Responsive web design应该如何翻译，目前自己感觉比较合适的是“响应式设计”。
响应式设计原理很简单，通过对不同的浏览器宽度用不同的CSS来进行渲染，从而达到自适应的目的。在宽度自适应中，只能给元素的宽度属性设置为比例，随着浏览器宽度的变化，只能让浏览器自己对其进行渲染，是不能够进行控制的。而响应式设计却能够控制在不同宽度下个元素的表现效果，这是两者最大的区别。
响应式设计需要浏览器对CSS3的支持，通过对不同宽度使用不同的CSS需要通过media query来实现，这也是该种设计方式还不能够大范围使用的主要原因。这里有一个响应式设计的Demo，来自Web Designer Wall。
下次向大家介绍响应式设计的具体实现方法，敬请期待~