CSS伪类与CSS伪元素的典型与非典型应用 - 为程序员服务
CSS伪类与CSS伪元素的典型与非典型应用
在上一篇《》里，已经详细区分了伪类和伪元素。但在这篇讲应用的文章里，其实并不需要这么明晰的概念区分。本文也不会再重提单冒号和双冒号之间的区别，本文更关注如何更好的使用伪元素和伪类——通过罗列一些典型甚至是非典型的用法，讲述伪类和伪元素的一些使用上的小技巧。在这个过程中，始终忽略浏览器的支持情况，任何一个例子无法正确运行的话，请先检查一下你当前的浏览器，是否赶上了这个时代的浪潮～
当然，一开始都是一些比较常规的内容，如果你对这些内容已经了然，可以直接跳到后面“非典”的部分:)
伪类与伪元素很大部分常规用途是在处理列表的。特别是 :nth-child() 这类结构伪类。
页脚链接可能是一个最为合适的例子，因为例子里伪元素和伪类并用。很多网站的页脚链接是用竖线分隔的罗列&a&标签形式。在这种页脚链接里使用伪类和伪元素的组合，就可以让链接的列表的HTML代码变得非常干净整洁：
ul.list{list-style:}
ul.list li{float:}
ul.list li:after{content:"\00a0|\00a0";}
ul.list li:last-child::after{content:"";}
但当前，放眼望去几乎不会有人这么做。绝大部分依然使用旧的方式。除了一些维护上的考量，习惯也是一个主要原因。熟优熟略这里不讨论，这里只是作为最典型的例子展示它们的应用。
最后项，奇偶项，倍数项
另一个广为人知的例子是：去掉列表最后一个元素的边框或者边距。在这种情况下，我们似乎已经习惯了给最后一个元素加上一个类似last-item的类名，然后单独写一条CSS规则。
ul.list li{margin-right:10}
ul.list li.last-item{margin-right:0;}
实际上，我自己在写的时候也会偏向一个早就习惯了的做法。在时间限定的情况下，不会考虑激进的方案，也不会考虑类似负边距或者超界显示等等优化方案，而只是一味的寻求最为保险和熟悉的习惯上的东西。习惯是可怕的顽固，所以可能今后还是会有很长一段时间不会写成下面这样：
#ul.list li{margin-right:10}
#ul.list li.last-child{margin-right:0;}
隔行背景色可能是奇偶项使用最多的情况，但现在又有多少人已经完全使用odd和even来替代额外添加的类名？
tr:nth-child(odd){background-color:#f4f4f4;}
tr:nth-child(even){background-color:#f9f9f9;}
还有诸如 Gallery 的特定项的边距，伪类的处理也不错不是嘛？
li:nth-child(3n) {margin-right:0;}
不过眼下，似乎更多人用负边距或者inline-block来处理，甚至直接让透明边距顶出容器，优化的手法已经很多，而且在维护性上甚至更有优势。
这其实还是上面的命题，但却单独拿出来说。如今的网页越来越多彩，也就不免单独指定一些亮丽的颜色。还是有很多人将特定的颜色用特定的类名标注。然而，如果颜色的映射顺序不怎么重要的话的，也许只是要达到多彩的简单目的，完全可以这么做：
li:nth-child(1) a{color:#f30;}
li:nth-child(2) a{color:#c0f;}
li:nth-child(3) a{color:#90f;}
li:nth-child(4) a{color:#06f;}
li:nth-child(5) a{color:#0}
应对各种区块的色系调整，伪类的使用可以大幅减少HTML里的单一用途的类名。顺着这个例子推荐一个网站：。这是一个由
建立的关于响应栅格布局的网站，他撰写的框架 xy.css 也有非常多的可以学习的地方。当然在这里举其作为例子还是因为这个网站的首页和这个例子相符——伪类实现的多彩的色块。
这是一个被讲烂的命题，不过我必须将其列在伪元素的典型应用的列表里，因为一般而言，伪元素(:after)在这里总是最为常见。之前我写的《》一文已经详细阐述过，所以这里不再冗述。唯一想顺带提一下的是，虽然清除浮动方法各异，但我自己其实挺偏向空标签的，原因嘛，还是习惯吧…
非典型应用
所谓的非典型应用其实无非就是“不干正经事”的意思，与当年的table多少有些神似。这部分里有一些已经淘汰的手法，但为了纪念它们存在的痕迹，还是将它们例举和提及。
如今的浏览器大部分都已经支持box-shadow这个方便的阴影制造器，也正因为此，box-shadow在如今的使用中颇为频繁。关于box-shadow的文章我也至少写过4篇：
虽然如今愈发觉得这个属性存在被滥用的危险，但是实际使用时，制造阴影往往需要和伪元素一起使用，特别是当页面中的某些布局需要额外元素制造阴影的时候。由于凡是支持box-shadow的浏览器都支持伪元素，所以几乎任何时候要添加box-shadow，伪元素都是考虑范围之一。比如，给全局网页加上一个顶部的阴影渐变：
body:before{content:"";position:top:-15left:0;width:100%;height:15box-shadow:0px 0px 15px rgba(150,150,150,.8);}
你可以直接在我的网页顶部看到效果(2013年下半年改扁平化之后应该会移除)。
之前写的，部分内容是有关 :empty 伪类的应用。
div:empty,
span:empty,
th:empty{padding:1background-color:#ff0 !}
:empty可以在开发过程中以可视化的方式过滤空标签。
额外的提示
比如给相应的链接增加相应的内容提示:
.example-block:before {
content: "Example:";
在我的印象里，早期的W3c标准文档里就是类似这么干的。这种额外信息的提示源自伪元素和CSS Content的配合使用，更多例子推荐阅读 Chris Coyier写的
内描边和背景透明
这两个算是浏览器在CSS2的大时代背景里夹缝里生存的trick，如今看来早已经过时。现在的内描边可以用box-shadow轻而易举的完成，透明背景则需要用到CSS的RGBA以及IE滤镜。但当时，不知道是谁想出用四角绝对定位一个伪元素，然后画边框来实现内描边，应用opacity和IE透明滤镜来实现背景透明。虽然过时，但每每提起这种陈年旧事总是感觉好怀念啊～
最后的最后，说起伪元素的应用，不得不提的是一个相当妖孽的网站：，用一个DIV拯救世界吧，少年！查看代码就会发现，其中充斥了伪元素和box-shadow，这么多把阴影当画笔的图标，当真是，妖孽极了…
这篇写了很久，思路断断续续的，写的不好，请见谅。水平有限写的不到位的，欢迎吐槽。
这期间浏览器翻天覆地的变化，让我觉得写些东西出来过不多久就要过时似的…Opera放弃内核，Chrome和Webkit分道扬镳，现在无法判断这些事是好是坏，总而言之，不学习一直停留着的话，真是要被洪流给吞了的…加了个油！
Related Post: --
(6)关于两者的区别，其实是很古老的问题。但是时至今日，由于各种网络误传以及一些不负责任的书籍误笔，仍然有相当多的人将伪类与伪元素混为一谈，甚至不乏很多CSS老手。早些年刚入行的时候，我自己也被深深误导，因为论坛里的帖子大多不关心这种概念的细微差别，即使有人出来说一句：“这两个是不同的”，也只是被更多的帖子淹没掉而已。所以觉得有必要写下这些我所知的部分，这里着重写的是为什么这两者不同，以及一些平时容易错... --
(0)我们对 inline-block 并不陌生，在工作中经常会碰到类似的应用，比如 list 的居中，比如各种 gallery
的列表展示，细小到可能只是一个段落里的一个元素，大到也许是整个的布局，都可以见到。
引用怿飞的 display:inline-block的深入理解，对于其中已经提到的这里不再冗叙。这篇文章里，我试图谈论的是网络上对于 inline-block 的一些误解，以及个人对于... --
(10)清除浮动对于任何CSSer来说都是基本中的基本，但我不喜欢称其为基础，因为最近我浏览网页看到各种充斥的清除浮动的方法后，才彻底明白，虽然各种方法被大量的使用，却甚为混乱。最糟糕的是很多有问题的流传版本的搜索排名都非常靠前，用神大人的话说就是：“错误的知识是毫无意义的”。
然而坊间流传的很多方法并非错误，而是有偏差——往往使用中不会出现问题，但是严格地说，它们是不准确的，难道我们搞技术的不应该... --
(0)display:run- 是一个非常有趣的属性，虽然作为普通流里的一个环节，但却很少有人问津。Chris Coyier 曾经写过一篇 CSS Run-in Display Value，简述了这个属性的作用。除此以外，它几乎不被人所讨论。
对于其定义，大致上就是下面这三点：
If the run-in box contains a block box, the r... --
(0)本篇是上篇《那些CSS的细节问题(2) —— 圆角响应区》的一个简短的延续，因为在上篇的篇幅里实在已经容不下更多混乱的部分。
尽管现在圆角边框的教材已经烂了大街到处都是，并且这个属性已经是诸多CSS3属性里应用最为广泛的特性之一，但却丝毫无法掩盖这个属性一路走来的坎坷。时至今日，现代浏览器对圆角边框的解释仍然存在诸多问题，比如上篇那些CSS的细节问题(2) —— 圆角响应区 讲到的对“响...
Just iifksp's blog
原文地址：, 感谢原作者分享。
您可能感兴趣的代码html系统学习之五  CSS用法，选择器，伪类，伪元素
html系统学习之五  CSS用法，选择器，伪类，伪元素
今天着重学习一下CSS，它有多大用处，相信地球人 都知道。样式首先它分三种用法：外部样式，当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。[html]&内部样式，当单个文件需要特别样式时，就可以使用内部样式表。[html]&内联样式，当特殊的样式需要应用到个别元素时，就可以使用内联样式。[html]&&如果某个元素同时应用了上面的样式，那么到底用谁呢？这里有个优先级，从高到低为：内联样式，内部样式(head标记中)，外部样式。CSS 语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。[html]&选择器selector通常是您需要改变样式的 HTML 元素。其中每条声明declaration又是由一个属性和一个值组成。打个比方：[html]&看清楚了吧，元素后面的内容用大括号括起来，每个声明后面有个分号，每个声明的属性与值是用冒号隔开的。与 XHTML 不同，CSS 对大小写不敏感。几个高级的语法：1.选择器的分组，多个选择器之间用逗号分隔，下面代码表示所有的标题颜色都用绿色，这里还有个通配符星号，代表所有元素[html]&2.继承及其问题，首先什么是继承？根据我的理解就是父元素的声明，应用到它的子元素，看个例子好理解[html]&这里应该这个窗体中的所有元素的字体都如body元素中设置的一样，但是问题就是早期的浏览器版本不支持继承，所以有时候只能用选择器分组，多写一点代码罗。如果要摆脱继承只需把子元素再创建一个规则。其它的一些选择器，可以相互组合派生选择器：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。[html]&在下面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。[html]&id 选择器：为标有特定 id 的 HTML 元素指定特定的样式。以 "#" 来定义[html]&类选择器：类选择器以一个点号显示：[html]&在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。[html]&类名的第一个字符不能使用数字！属性选择器：如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。[html]&把包含标题（title）的所有元素变为红色[html]&上面将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。[html]&子元素选择器：注意大于号[html]&这个规则会把第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响：[html]&&相邻兄弟选择器：注意加号[html]&这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。&这么多选择器，已经晕了，再组合一下，我要敢问路在何方，其实想想，选你喜欢上手的用就行了，经常用的不会很多，碰到特殊情况知道还有其它选择方法就行了。伪类W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。&属性描述CSS向被激活的元素添加样式。1向拥有键盘输入焦点的元素添加样式。2当鼠标悬浮在元素上方时，向元素添加样式。1向未被访问的链接添加样式。1向已被访问的链接添加样式。1向元素的第一个子元素添加样式。2向带有指定 lang 属性的元素添加样式。2&CSS 伪类用于向某些选择器添加特殊的效果。[html]&以上叫什么锚伪类，在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。CSS2 - :first-child 伪类[html]&第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。CSS2 - :lang 伪类:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型[html]&伪元素W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。&属性描述CSS向文本的第一个字母添加特殊样式。1向文本的首行添加特殊样式。1在元素之前添加内容。2在元素之后添加内容。2&CSS 伪元素用于向某些选择器设置特殊效果。头快要爆炸了，一下子接受不了这么多，先记下了，日后再来当字典查吧
发表评论：
TA的最新馆藏CSS3:伪类前的冒号和两个冒号区别,CSS教程,CSS案例,CSS实例
本站中文域名：、　
　　　　　　　　
　　　　　
　|　　|　　|　　|　　
　　　　　|　　　　　|　　　　　|　　　
您的位置： &&
&& CSS3:伪类前的冒号和两个冒号区别
CSS3:伪类前的冒号和两个冒号区别
　　在一次
名目中，有一次要用到::selection伪元素，
而后开发同
常识我，CSS中一个冒号和两个冒号有神马区别？ 　　这
如同真的是个问题，兴许众多前端同学对此都有
不解，查了些
材料，证实了下两个符号的区别，简而言之：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素&。 　　W3C关于CSS3
标准中有一段
形容： 　　A pseudo-element is made of two colons (::) followed by the name of the pseudo-element. 　　This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3. 　　
方便翻译一下，
粗心便是，伪元素由双冒号和伪元素名称构成&。双冒号是在目前
标准中引入的，用于
划分伪类和伪元素&。然而伪类兼容现存
款式，阅读器需求同时
支撑旧的伪类，
比方:first-line、:first-letter、:before、:after等&。 　　那么现在就
题目中的问题了，关于CSS2之前已有的伪元素，
比方:before，单冒号和双冒号的写法::before作用是一样的&。 　　所以，假如你的网站
惟独求兼容webkit、firefox、opera等阅读器，
提议关于伪元素采纳双冒号的写法，假如只能兼容IE阅读器，还是用CSS2的单冒号写法
比较安全&。
　　在一次
名目中，有一次要用到::selection伪元素，
而后开发同
常识我，CSS中一个冒号和两个冒号有神马区别？ 　　这
如同真的是个问题，兴许众多前端同学对此都有
不解，查了些
材料，证实了下两个符号的区别，简而言之：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素&。 　　W3C关于CSS3
标准中有一段
形容： 　　A pseudo-element is made of two colons (::) followed by the name of the pseudo-element. 　　This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3. 　　
方便翻译一下，
粗心便是，伪元素由双冒号和伪元素名称构成&。双冒号是在目前
标准中引入的，用于
划分伪类和伪元素&。然而伪类兼容现存
款式，阅读器需求同时
支撑旧的伪类，
比方:first-line、:first-letter、:before、:after等&。 　　那么现在就
题目中的问题了，关于CSS2之前已有的伪元素，
比方:before，单冒号和双冒号的写法::before作用是一样的&。 　　所以，假如你的网站
惟独求兼容webkit、firefox、opera等阅读器，
提议关于伪元素采纳双冒号的写法，假如只能兼容IE阅读器，还是用CSS2的单冒号写法
比较安全&。
Google搜索中
搜狗搜索中
在线教程导航
数据库开发
产品库推荐
| 站长工具：
All Rights Reserved.
珠江路在线版权所有
苏ICP备号 中文域名：
　|　　|　css教程之伪类和伪元素
来源：未知
伪类和伪元素
　　伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。
　　伪类或伪元素规则的形式如
选择符:伪类 { 属性: 值 }
选择符:伪元素 { 属性: 值 }
　　伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:
选择符.类: 伪类 { 属性: 值 }
选择符.类: 伪元素 { 属性: 值 }
&定位锚伪类
　　伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示，甚至不同字体大小和风格。
　　一个有趣的效果是使当前(或&可激活&)连接以不同颜色、更大的字体显示。然后，当网页的已访问连接被重选时，又以不同颜色、更小字体显示。这个样式表的示例如下:
A:link&&& { color: red }
A:active& { color: font-size: 125% }
A:visited { color: font-size: 85% }
&首行伪元素
　　通常在报纸上的文章，例如Wall Street Journal中的，文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能，将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:
P:first-line {
& font-variant: small-
& font-weight: bold }
&首个字母伪元素
　　首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如:
P:first-letter { font-size: 300%; float: left }
　　会比普通字体加大三倍。
-----------