CSS3学习笔记之选择器

新增的关系选择器有:

1.亲儿子选择器:>

2.下一个兄弟:+

3.下一群兄弟:~

新增的属性选择器:

1.标签[^="a"]  : 匹配属性值以a开头的元素

2.标签[$="a"]:   匹配属性值以a结尾的元素

3.标签[*="a"]:   匹配属性值含有a的元素

4.标签[|="a"]:   匹配属性值以a开头,紧跟一个-的元素

5.标签[~="a"]:  匹配属性值是一个独立的用空格分开的个体

序号选择器: 序号从1开始。

1. a:first-child : 匹配是某元素第一个儿子的a标签;

2. a:last-child: 匹配是某元素最后一个儿子的a标签;

3. a: nth-child(n): 匹配是某元素第n个儿子的a标签;

   支持表达式,如: a:nth-child(5n+1): 匹配是某元素第1,6,11,16...个儿子的a元素

4.a:nth-last-child(n): 匹配是某个元素倒数第n个儿子的a元素,同样支持表达式。

 5.  .c:nth-of-type(n): 匹配是某一个元素class为c的儿子中的第n个。

  同理还有 first-of-type/last-of-type

6.  .c:nth-last-of-type(n): 匹配某一个元素中class为c的儿子中的第n个。

原文地址:https://www.cnblogs.com/qingxiawu/p/8506279.html