CSS3特性挑选符详细介绍

2021-01-20 17:06 jianzhan

英文原文:
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
汉语汉语翻译:
http://www.dudo.org/article.asp?id=197
注:本文写于2006年1月,那时候IE7、IE8和Firefox3还未发售,文中全部说的访问器适用均未包含这3个版本号的访问器。在IE8和Firefox3中,文中的绝大多数挑选符早已被适用[dudo注]
在2005年的9月和10月,我前后发布了几篇有关CSS2.1选中择符的详细介绍文章内容。大致来看那几篇文章内容中详细介绍过的绝大多数挑选符都早已能够在像Mozilla/Firefox,Safari和Opera等当代访问器中应用了。大家如今要做的便是等候Internet Explorer尽快遇上来,那大家便可以畅快地应用CSS2.1中的挑选符了。好在Internet Explorer在其第7个版本号中早已在竭尽全力追逐了,最少在一些拓展层面。
假如大家再向前看1点,在CSS3中也有作用更为强劲的挑选符等候大家去挖掘和应用。CSS3中的许多挑选符早已在当代访问器中获得很好的运用(IE8.0中也早已一部分地适用了CSS3,dudo注),可是这些基础作用上的适用还远远不可以考虑开发设计者应用的规定。可是在一些状况下应用她们能够带来很好的超前体验,因而我觉得掌握1下CSS 3新增挑选符是怎样应用還是有利处的。
本文中对挑选符叙述关键是参照了《2005年12月15日W3C制订的挑选符文稿》。文稿中讲到的新的挑选符将会会在CSS的第3个版本号中出現,可是也将会会出現在别的語言中。假如你是几个月前乃至是几年前读过这篇文稿,那末如今你应当再去看1下是否早已出現了全新版本号了。
这里我不准备去解释CSS挑选符工作中的基础基本原理。假如你想关键备考1下的话,最好是从《细说CSS2.1中的挑选符》刚开始。
最先,迅速访问1下CSS3中新增的挑选符:
CSS3挑选符英语的语法概览
挑选符种类 表述式 叙述 子串配对的特性挑选符 E[att^="val"] 配对具备att特性、且值以val开始的E元素 子串配对的特性挑选符 E[att$="val"] 配对具备att特性、且值以val末尾的E元素 子串配对的特性挑选符 E[att*="val"] 配对具备att特性、且值中含有val的E元素 构造性伪类 E:root 配对文本文档的根元素。在HTML中,根元素始终是HTML 构造性伪类 E:nth-child(n) 配对父元素中的第n个子元素E 构造性伪类 E:nth-last-child(n) 配对父元素中的倒数第n个构造子元素E 构造性伪类 E:nth-of-type(n) 配对同种类中的第n个同级弟兄元素E 构造性伪类 E:nth-last-of-type(n) 配对同种类中的倒数第n个同级弟兄元素E 构造性伪类 E:last-child 配对父元素中最终1个E元素 构造性伪类 E:first-of-type 配对同级弟兄元素中的第1个E元素 构造性伪类 E:only-child 配对属于父元素中唯1子元素的E 构造性伪类 E:only-of-type 配对属于同种类中唯1弟兄元素的E 构造性伪类 E:empty 配对沒有任何子元素(包含text连接点)的元素E 总体目标伪类 E:target 配对有关URL指向的E元素 UI元素情况伪类 E:enabled 配对全部客户页面(form表单)中处在能用情况的E元素 UI元素情况伪类 E:disabled 配对全部客户页面(form表单)中处在不能用情况的E元素 UI元素情况伪类 E:checked 配对全部客户页面(form表单)中处在选定情况的元素E UI元素情况伪类 E::selection 配对E元素中被客户选定或处在高亮度情况的一部分 否定伪类 E:not(s) 配对全部不配对简易挑选符s的元素E 通用性弟兄元素挑选器 E ~ F 配对E元素以后的F元素

假如对上面的叙述还并不是很清晰的,请不必担忧。本文下面的一部分可能对她们开展更为详尽的解读,而且出示事例来演试她们是如何应用的。
上1页12 3 4 5 下1页 阅读文章全文