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 选择器的匹配规则,则该元素被选中。例如:
    成功匹配到了 <div> 下的第一个元素 <p class="para">paragraph - 1</p>

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


  • 元素类型选择器:X:nth-of-type(n)
    该选择器的匹配规则为:匹配符合 X 选择器规则的第 n 个元素。例如:
    成功匹配到符合 p.para 规则的第一个 <p class="para">paragraph -1</p>

    成功匹配到符合 p.para 规则的第二个 <p class="para">paragraph - 2</p>


2. ~,+,> 三中符号的作用:

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

  • 子集选择器:我们经常用到 div p 这样的选择器写法,其表示匹配 <div> 下所有的 <p> ,而 div > p 表示仅匹配 <div> 下的子集 <p>。例如:

    匹配到 div#first 下为 <p> 的所有后代

    只匹配到 div#first 下为 <p> 的子代


  • 兄弟选择器:例如 div + p 表示匹配 <div> 后紧接的第一个 <p> 兄弟标签;而 div ~ p 表示匹配 <div> 后所有的 <p> 兄弟标签。例如:

    匹配 div#first 其后第一个 <p> 兄弟标签

    匹配 div#first 其后所有的 <p> 兄弟标签


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" 结尾的元素(正则表达式)。