简洁版本的CSS 3 选择器解释

tznktg · 发表于 2008-7-2 19:09:53

在CSS 3里，假设你做了一个包含以下标签结构的HTML文件:

<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>

然后呢，在CSS文件里

div[id^="nav"] { background:#ff0; }

注意是“^”
CSS在这种情况下将控制div#nav-primary 和div#nav-secondary。请大家注意，这两个标签前面都有 nav ，到底是以"-"做为分隔，还是把ID进行从前至后匹配就不得而知了 [sweat]

div[id$="primary"] { background:#ff0; }

注意是“$”
CSS在这种情况下将控制div#nav-primary 和div#content-primary。请大家注意，这两个标签后面都有 primar ，到底是以"-"做为分隔，还是把ID进行从后至前匹配也就不得而知了 [sweat]

div[id*="content"] { background:#ff0; }

注意是“*”
CSS在这种情况下将控制div#content-primary div#content-secondary 和div#tertiary-content。请大家注意，这些标签都含有 content ，到底是以"-"做为分隔，还是把ID自动扫描后匹配就更不得而知了 [sweat]

好象作者说这几个标签现在除了IE不支持，其它最新版的各种浏览器都支持了，大家可以一试，我就不试了~ [lol]

div#content-primary:target { outline:1px solid #300; }

注意那个“:target”
CSS在这种情况下将控制 http: //www.example.com/index.html#content-primary 这个锚链接（锚链接差不多可以理解就是一个网页内的链接，比较在有些网页看到的回到顶部）

作者说现在Mozilla 和 Safari浏览器支持这个

input[type="text"]:enabled { background:#ffc; }
input[type="text"]:disabled { background:#ddd; }

注意那个“[type="text"]:enabled”
这个就是控制表单的CSS了，“[type="text"]”好象是表单里type是text的吧。。。那type="password"会是啥呢？

input:checked { border:1px solid #090; }

注意那个“:checked”
这个就是控制表单的“选择”的CSS了。。。

作者说现在Opera和Mozilla浏览器支持这些

:root { background:#ff0; }
html { background:#ff0; }

大家注意那个“:root”
这个“:root”是比 html 还要高一级的标签，这个大家可以看一叶千鸟写的正确认识html与body 他在文中发现了原来html 外面还有个框框，嘿嘿~

作者说现在Mozilla 和 Safari浏览器支持这个

接下来的 :nth-child() 就比较有意思了，呵呵~在括号里可以放数字和默认的字母~

p:nth-child(3) { color:#f00; }

这个意思好象是说以第一个出现的 P 为基础，只要是“3”的倍数的全部 P 都会被控制~

p:nth-child(odd) { color:#f00; }

这个意思好象是说以第一个出现的 P 为基础，然后奇数目的全部 P 都会被控制~

p:nth-child(even) { color:#f00; }

这个意思好象是说以第一个出现的 P 为基础，然后偶数目的全部 P 都会被控制~

p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }

这两个标签是等效的，因为第一个后面的0等没没起作用，他的意思就是3倍于第一个出现的 P 的 P 都会被控制~（好绕口啊，HOHO~ [rolleyes] ）也就是说这个 “n” 会从0.1.2.3.4.5.6....一直取值下去~算出来多少就是多少的 P 都会被控制。。。

tr:nth-child(2n+11) { background:#ff0; }

这个如果大家理解上面的了，这个也不难理解，不过他控制的标签变成了 “tr” 这就是说表格会变得更加变化多端，感觉大家一定要小学算数得好，学得不好得快快回家再学一学小学算数去。。。（不过，这样的标签是不是加重了电脑处理的效率呢？ [confused] 希望我的但心是多余的。。。）

p:last-child { background:#ff0; }

在 p 之前的一个 p 被控制（NND，p来p去的，打pp [sweat] ）

:not(p) { border:1px solid #ccc; }

这个p不被控制，自已用自带的样式的意思吧，应该是和前面的那些一起用才是。。。

p ~ ul { background:#ff0; }

ul 优先于 p 显示，这是咋个优先法，不清楚。。。

基本上我看得懂的就这些了，大家可以到下面两个网址接着学习，我有什么说错了，记得告诉我啊
www.456bereastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectors-20051215/

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

简洁版本的CSS 3 选择器解释

相关帖子