参考自: 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的。