几个选择器的比较和准确的描述

几个易混的选择器

1. div,p: 所有div和p的元素
2. div p：所有div内部的p元素
3. div>p: 所有父元素为div的p元素
4. div+p: 所有紧邻div的同级p元素
5. div~p: 所有前面有div的同级p元素

属性选择器和对比

1. [target]: 所有有target属性的元素
2. [name='huang']: 所有name属性为huang的元素

属性正则匹配模式

1. [name~='huang']: 所有name属性包含huang的元素
2. [name^='huang']: 所有name属性以huang开头的元素
3. [name$='huang']: 所有name属性以huang结尾的元素

2组易混正则匹配对比

对比	[name~='huang']	[name*='huang']
分别可以匹配	huang bin	huangbin

1. name~='huang bin': 匹配的是独立的单词,huangbin不能被匹配
2. *=: 匹配的是子串

对比	[name^='huang']	[name|='huang']
匹配	huang bin	huang-bin

1. name|=huang-bin: 匹配开头是huang或huang-单词
2. name^=huang bin: 匹配开头包含h子串的元素

内容选择器

:nth-child(n)和:nth-of-type(n)比较

1. div:nth-child(3)：父元素的第3个div元素
2. div:nth-of-type(2): 所有type为div的同级的第二个div
3. 最大的区别:
   • nth-of-type是所有层级的范围,div:nth-child(2)不仅限制了是父元素的第二个子元素，且类型为div
   • nth-of-type: 按照元素的类型来选择，.item:nth-of-type{}，如果item对应不同的元素类型，则会分别计算个数，详见末尾例子

几个易忘记的

1. p:first-line: p元素的首行
2. p:first-letter: p元素的首字母
3. p:first-child: p元素的首个子元素
4. p:last-of-type: 所有层级最后一个p元素
5. p:first-of-type: 所有层级第一个p元素
6. p:only-of-type: 所有层级中唯一为p的元素
7. p:only-child: 父元素只有一个子元素的p元素
8. p:nth-last-child(2): 父元素倒数第二个p元素
9. p:nth-last-of-type(2): 父元素倒数第二个类型为p的元素
10. :root: 文档的根元素
11. p:empty: 选择没有子元素的每个p元素
12. input:enable: 选择每个启用的input元素
13. input:disabled: 选择每个禁用的input元素
14. input:checked: 选择每个选中的input元素
15. :not(p): 选择非p的每个元素
16. ::selection: 选择被用户选择元素部分

状态选择器

1. a:link: 所有未被访问的链接
   • 注意：浏览器默认的给的是hover的样式,因此只有去改变他的href才能显示对应的样式
2. a:visited: 选择访问过的链接
3. a:hover: 选择悬浮的链接
4. a:active： 选择活动的链接

注意事项

1. 鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义
2. 鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义
3. 正确顺序a:link、a:visited、a:hover、a:active

关于nth-of-type(n)比较好的例子

<style>
.item:nth-of-type(3){
  color:red;
}
.item:nth-child(2) {
  color: yellow
}
</style>
<h1>标题</h1>
<p class="item">第一个.item p</p>
<p>这是锻若</p>
<span>第一个span</span>
<span class="item">第一个.item span</span>
<span class="item">第二个.item span</span>  //我是红色
<p class="item">第二个.item p</p>  //我是红色
<p class="item">第三个.item p</p>
<p class="item">第四个.item p</p>