// 关于CSS 3

POSTED ON // BY s5s5 // IN First Category // - 评论

Roger Johansson （这个老外仿佛是参与编订 W3C 的家伙）前几天写了一个关于CSS 3的文章：CSS 3 selectors explained 里面说了去年12月份w3c最新制定的CSS 3的新标签、新用法，我用机器翻译看着也蛮爽的，把看得懂的摘录下来，大家也学习一下先进经验。呵呵~

在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进行从前至后匹配就不得而知了 😅

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

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

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

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

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

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~ 🙄 ）也就是说这个 “n” 会从0.1.2.3.4.5.6…一直取值下去~算出来多少就是多少的 P 都会被控制。。。

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

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

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

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

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

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

p ~ ul {
  background: #ff0;
}

控制与 p 是兄弟的 ul 标签，这两个 p 和 ul 必须具有相同的爸爸标签，但 ul 不必紧邻 p

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

最后，让转载不写人家名字的朋友们高举毛泽东思想伟大旗帜，认真学习毛主席语录为共产主义在世界范围内处处开花而努力奋斗吧~ 💡

米随随 书于孝感