响应式设计-谈谈伪类和伪元素

标签: 构建 | 发表时间:2013-11-27 16:35 | 作者:alon
出处:http://varhi.com

啥是伪类?啥是伪元素,我想还是从我们熟悉的东西开始吧!可能我们最初接触伪类和伪元素应该是从 a (链接标签)开始的,我们通过 :link, :visited, :hover, :active,通过这些伪类,我们就改变了那些链接的文字颜色,也就是说我们改变了被选择元素的某些状态。

关于伪类的定义,我从 MDN 看到的描述是这样的:

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

如果我去断章取义加谷歌翻译的理解的结果是:
伪类是一组关键字,可以定义被选择元素的特殊状态。比如 :hover 将会定义当用户的鼠标悬浮到被定义选择器的样式。
伪类和伪元素,让我们不仅可以定义文档树中的元素,也能让我们扩展到这些方面之外的东西,比如我们的访问记录(如 :visted),内容的状态(如某些表单元素的 :checked),或者鼠标的位置(如 :hover 让我们知道我们的鼠标是否在某个元素上面)。

下面是琳琅满目的伪类选择器,有些我们很熟悉,有些似曾相识,但是更多的可能是路人甲,附上链接地址给各位看官,方便大家了解。

从上面,我们可以说伪类就是给我们标示状态的,我们为什么称其为伪类呢?波塞冬(pseudo)的字面意思是冒充的、假的,也就是这些东西并不是真正的类,我们定义是他的状态。

但是我们的伪类还有 :after, :before我们一直使用的,这些东西虽然没有给文档树增加节点,但是他们确实增加了内容,这样咱们做到的不仅仅是标示了状态,我们还增加了内容,所以我们有提出了伪元素的概念。下面给大家看看 MDN 的描述吧!

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.

都有哪些伪元素选择器呢?

我们看到在语法上面,伪元素和伪类最明显的区别是多了一个冒号,但是我们用 :  :: 获得的结果是一样的,为毛?

Sometimes you will see double colons (::) instead of just one (:). This is part of CSS3 and an attempt to distinguish between pseudo-classes and pseudo-elements. Most browsers support both values.

::selection always starts with double colons (::).

我们可以看到,两个冒号是在css3中为了让我们区分开来伪类和伪元素。That’s all,吓我们一跳。

故事到这个地方还没有完,既然伪元素是 css3 中的东西,那它的兼容性咋样呢?答案如下:

Browser Lowest Version Support of
Internet Explorer 8.0 :pseudo-element
9.0 :pseudo-element ::pseudo-element
Firefox (Gecko) 1.0 (1.0) :pseudo-element
1.0 (1.5) :pseudo-element ::pseudo-element
Opera 4.0 :pseudo-element
7.0 :pseudo-element ::pseudo-element
Safari (WebKit) 1.0 (85) :pseudo-element ::pseudo-element

就是这样,如果你现在也在忙于响应式,那么你就要关注了,因为你要为IE8及以下的用户负责,要不然你的产出物可能要闯祸,你要负责,因为这些东西上流淌着你的血液。所以我们如果能用伪类的话,就先别用伪类选择器了,这可能是最直接的解决方案了。

但是两个冒号 :: 带来的麻烦不仅仅是在 IE8 及以下的浏览器上不解析,如果你像下面这么写 css 样式,那你要注意了,因为你的 css 在 IE8 上没有被解析。


.a,
.b::after{color:#f00}

我们可能认为即使IE8不解析伪元素,.a 的样式也能解析,但结果是 .a 在 IE8 及以下也不生效了。因此在群组选择器中是用伪元素要注意了。

转载请注明出处: 响应式设计-谈谈伪类和伪元素

相关 [响应式 设计 元素] 推荐:

响应式设计-谈谈伪类和伪元素

- - 收集分享互联网资源!
啥是伪元素,我想还是从我们熟悉的东西开始吧. 可能我们最初接触伪类和伪元素应该是从 a (链接标签)开始的,我们通过 :link, :visited, :hover, :active,通过这些伪类,我们就改变了那些链接的文字颜色,也就是说我们改变了被选择元素的某些状态. 关于伪类的定义,我从 MDN 看到的描述是这样的:.

响应式网页设计

- - 前端观察
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以 先看下这个PPT. 在说到这个话题前,我们先看下网页设计和前端开发的现状:. 全球有超过53亿手机用户(包括传统手机).

响应式Web设计

- - 葵中剑's Blog - SwordAir.com
响应式Web设计( Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局. 虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如:. 响应式Web设计50个例子和最佳实践.

响应式网页设计

- - IT技术博客大学习
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案. Web设计应该做到根据不同设备环境自动响应及调整. 当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先.

响应式Web设计

- - 阿里巴巴(中国站)用户体验设计部博客
在设计中经常遇到这几个问题:. 1.想要网站兼容手机、平板电脑、pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好. 有没有办法能有效解决这些问题呢.

漫谈响应式设计

- - 新浪UED
学究一些,首先大家先了解一下响应,然后再讲一下设计,响应就是我发出的请求能得到什么样子的回复,比如我说“你好”,你会很容易的给我回复“你好”,因为大家都是中国人,如果我说“hello”,我们这代人如果上过初中,他也会给我说“Hello”,但是如果我给对你说“Bonjour”,那可能只有高配的人才可能知道了.

淘宝响应式WebUI设计实践

- - Taobao UED Team
感谢贷岩的邀请,我在本期奶茶会上做了“响应式设计实践”的分享,是接着上一次的话题进一步讨论“如何实现”. 响应式Web设计(Responsive Web design)是当下比较流行的话题,什么是响应式设计. 简单讲,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整.

Screenqueri.es:响应式设计测试工具

- - 我爱水煮鱼
当你创建一个响应式的布局的时候,在绝大部分流行的分辨率的设备上进行测试是非常重要的,这可以让你决定页面上的每块是否现实或者优化它们的显示方式. 今天给大家介绍的 Screenqueri.es 就是一个免费的基于 Web 的响应式设计的测试工具,它能够让你输入一个网址,然后选择移动或者平板设备,然后对你的网站在各个分辨率下进行测试.

非响应式设计的viewport

- - 前端观察
整理自: Viewport Meta Tag For Non-Responsive Design. 中文原文: 非响应式设计的viewport. 请尊重版权,转载请注明来源,多谢~~. 大家已经非常熟悉 响应式网页设计了吧,但是我们通常会忽略很多旧的没有采用响应式设计的网站,其实这类网站在移动终端的用户体验更为关键——因为它们没有对移动设备做任何优化.

响应式设计简易指南

- - Jing
我们想让我们的网站通过响应用户的行为、设备的屏幕大小和屏幕方向,从而在所有设备上都能用. 截止2013年,有成千上万种不同的设备在浏览网页,所以我们不可能设计出适应所有屏幕大小的网页. 相反,我们必须得采用一种更加流畅的方式去设计. 最近一个比较火的词叫移动优先. 它的意思是,先为移动端设计样式,然后再根据需求去优化更大屏幕的样式.