CSS3 中较少使用但非常有用的几种选择器

CSS3 新出了很多的选择器，很多场景下都很有用。
我想到了初学者学习时，可能会问的三个问题，借着它们，我们一窥 CSS3 新增选择器的局部：

1. li:nth-child(n) 与 li:nth-of-type(n) 的区别是什么啊？感觉它们的效果是一样的...

2. ～，+，> 这三个符号都是什么意思啊？

3.a[title]，a[title="www"]，a[title*="www"]，a[title^="https"]，a[title$=".com"]... 这有什么区别啊？

----- 华丽的分割线 -----

1. X:nth-child(n) 与 X:nth-of-type(n) 的区别：

(注 X 为一种选择器)

• child选择器：X:nth-child(n)
  该选择器的匹配规则为：1.确定 X 的父级；2.找到父级中第 n 个子元素，如果该子元素符合 X 选择器的匹配规则，则该元素被选中。例如：
  
  

  成功匹配到了

  下的第一个元素

  paragraph - 1

  
  

  

  选择

  下第的二个元素，但其不符合 p.para 选择器的规则，所以匹配失败

  
  
  
• 元素类型选择器：X:nth-of-type(n)
  该选择器的匹配规则为：匹配符合 X 选择器规则的第 n 个元素。例如：
  
  

  成功匹配到符合 p.para 规则的第一个

  paragraph -1

  
  
  

  成功匹配到符合 p.para 规则的第二个

  paragraph - 2

  
  
  

2. ～，+，> 三中符号的作用：

其进一步可划分为 子集选择器 和 兄弟选择器：

• 子集选择器：我们经常用到 div p 这样的选择器写法，其表示匹配

  下所有的

  ，而 div > p 表示仅匹配

  下的子集

  。例如：
  

  

  匹配到 div#first 下为

  的所有后代

  
  

  

  只匹配到 div#first 下为

  的子代

  
  
  

• 兄弟选择器：例如 div + p 表示匹配

  后紧接的第一个

  兄弟标签；而 div ~ p 表示匹配

  后所有的

  兄弟标签。例如：
  

  

  匹配 div#first 其后第一个

  兄弟标签

  
  

  

  匹配 div#first 其后所有的

  兄弟标签

  
  
  

3. X[title]，X[title="www"]，X[title*="www"]，X[title^="https"]，X[title$=".com"] 这一类统称为——属性选择器

(注 X 为一种选择器)

• X[title] 表示匹配既符合 X 选择器的规则，又有属性 title 的元素。
• X[title="www"] 表示匹配既符合 X 选择器的规则，又有属性 title="www" 的元素。
• X[title*="www"] 表示匹配既符合 X 选择器的规则，又有属性 title，且其值包含 "www" 的元素（正则表达式）。
• X[title^="https"] 表示匹配既符合 X 选择器的规则，又有属性 title，且其值包含以 "https" 开头的元素（正则表达式）。
• X[title^="https"] 表示匹配既符合 X 选择器的规则，又有属性 title，且其值包含以 ".com" 结尾的元素（正则表达式）。