css3中的伪类,css3常用伪类

雨点打透心脏的1/2处 2022-09-02 14:52 192阅读 0赞

2018-11-17 回答

许多强大的新伪类选择器(最新的 w3c 规范中列出了 16 条)使得我们能够在新的标准范围内使用元素选择器。在探讨这些新的 css3 伪类之前，先简要回顾追溯一下这些在 web 应用中常常被误解的 css 选择器。伪类简史在1996 年，当 css1 的规范完成后，一些伪类选择器已被囊括在内，其中许多你几乎每天都在使用。例如：:link:visited:hover:active这些状态都可以被应用到某个元素，通常是以 “a:伪类名”的形式。令人难以置信的是，在 w3c 于 1997 年 12 月发布 html4 规范之前，这些伪类已经被极为广泛地使用了。css2 来了于是css2 来了。其建议规范在两年之后的 1998 年 5 月发布。随之令人兴奋的是添加了 :first-child 和:lang() 新伪类。:lang有许多种表示文档语言类型的方法，如果你使用 html5，很可能会直接在 doctype 声明之后放置 语句(指定本地语种)。当然，你也可以使用 :lang(en) 伪类来修饰页面元素，对于语言动态变化的情况，这将非常有用。:first-child您可能已经在文档中使用 :first-child 属性。它通常用于添加或删除列表中第一个元素的上边框。奇怪的是，却没有 :last-child 这样的伪类与之对应。于是不得等到 css3 规范的对这两个兄弟伪类的支持。为何使用伪类？伪类如此实用的原因在于它们允许动态地设置内容样式。比如上面的 例子，我们能够描述当用户与链接进行交互时，链接该如何呈现样式。正如我们看到的，新的伪类允许我们根据元素在文档中的位置或状态，动态地设置其样式。16 个全新伪类已经成为 w3c 的 css 建议的一部分，它们被分成四组：结构伪类、ui 元素的状态伪类、一个目标(target)伪类和一个否定伪类。w3c 是 css 之家现在我们一起探究看看如何使用这 16 个新伪类选择器。我会使用和 w3c 相同的标识符来命名 css 类，比如 e 代表元素(element)，n 表示数字(number)，s 表示选择器(selector)。示例代码大部分新选择器都会给出参考示例，以便直观地看到代码呈现效果。这里会涉及一张适用于 iphone 并且使用了 css3 伪类的表单。请注意，这张表单中大部分样式可以使用 id 和类(class)选择器设定。即便如此，仍然可以使用新伪类针为这个表单锦上添花。 email address personal details title mr mrs miss first name initial surname payment details name on card card number select card type visa american express mastercard expiry date mm 01 02 03 04 05 06 07 08 09 10 11 12 / yyyy 11 12 13 14 15 16 17 18 19 security code would you like insurance?