css中的选择器
参考自： http://www.w3school.com.cn/cssref/css_selectors.asp
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
对于:first-clild及相关的选择器的理解。
首先：表示伪类，其次我们需要知道:first-child一定使用在子元素上的，:也可以看作过滤的意思，那么这个选择器的使用就必须就是 父元素 子元素：first-child （其他类似）下面举例说明：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>:first-child</title> <style> .parent-ele p:first-child { color: red; } .parent-ele p:last-child { color: blue; } .parent-ele p:nth-child(2) { color: green; font-weight: bold; } </style> </head> <body> <div class="parent-ele"> <p>这是第一个段落</p> <p>这是第二个段落</p> <p>这是第三个段落</p> <p>这是第四个段落</p> <p>这是第五个段落</p> </div> </body> </html>
最终的效果如下所示：
css3中新增了一个伪元素选择器 ::selection ,这个选择器的作用是作用于用户选中的文本，官网介绍。
使用方法如下：
::selection { color:#ff0000; } ::-moz-selection { color:#ff0000; }
该属性所有的浏览器都支持，知识ff需要使用-moz-前缀。
例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>selection</title> <style> ::selection { color: red; background-color: blue; } ::-moz-selection { color: red; outline: 10px; background-color: blue; } </style> </head> <body> <div class="text"> lild及相关的选择器的理解。 首先：表示伪类，其次我们需要知道:first-child一定使用在子元素上的，:也可以看作过滤的意思，那么这个选择器的使用就...在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3 </div> </body> </html>
最后的效果如下：
下面的这个例子是重复的：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>testChild</title> <style> .wrap p:first-child { color: red; } .wrap p:last-child { color: blue; } .wrap p:nth-child(2) { /*这里的n是从1开始的，所以这里2就是指子元素中的第二个*/ color: green; font-size: 25px; } </style> </head> <body> <div class="wrap"> <p class="son">p元素</p> <p class="son">p元素</p> <p class="son">p元素</p> <p class="son">p元素</p> <p class="son">p元素</p> </div> </body> </html>
最终的效果如下：
下面的例子是:nth-child(2n) 的使用方法（注意：在这里第一个元素是1而不是0）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>testChild</title> <style> .wrap p:nth-child(2n) { color: red; } </style> </head> <body> <div class="wrap"> <p class="son">p元素</p> <p class="son">p元素</p> <p class="son">p元素</p> <p class="son">p元素</p> <p class="son">p元素</p> </div> </body> </html>
最终的结果如下所示：
注意：nth-child(2n)的效果和nth-child(even)的效果是相同的。 都是偶数的子元素被选中。 而nth-child(odd)是奇数的子元素被选中。
不难想象nth-child(3n+1)和nth-child(3n+2)的作用，如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>testChild</title> <style> .wrap p:nth-child(3n+1) { color: red; } .wrap p:nth-child(3n+2) { font-size: 30px; } </style> </head> <body> <div class="wrap"> <p class="son">p元素</p> <p class="son">p元素</p> <p class="son">p元素</p> <p class="son">p元素</p> <p class="son">p元素</p> <p class="son">p元素</p> <p class="son">p元素</p> </div> </body> </html>
效果如下：
即虽然元素的第一个是序号1，但是其中的n值还是可以取0的。
