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" 结尾的元素（正则表达式）。
网友评论