几个易混的选择器
div,p: 所有div和p的元素div p：所有div内部的p元素div>p: 所有父元素为div的p元素div+p: 所有紧邻div的同级p元素div~p: 所有前面有div的同级p元素
属性选择器和对比
[target]: 所有有target属性的元素[name='huang']: 所有name属性为huang的元素
属性正则匹配模式
[name~='huang']: 所有name属性包含huang的元素[name^='huang']: 所有name属性以huang开头的元素[name$='huang']: 所有name属性以huang结尾的元素
2组易混正则匹配对比
| 对比 | [name~='huang'] | [name*='huang'] |
|---|---|---|
| 分别可以匹配 | huang bin | huangbin |
name~='huang bin': 匹配的是独立的单词,huangbin不能被匹配*=: 匹配的是子串
| 对比 | [name^='huang'] | [name|='huang'] |
|---|---|---|
| 匹配 | huang bin | huang-bin |
name|=huang-bin: 匹配开头是huang或huang-单词name^=huang bin: 匹配开头包含h子串的元素
内容选择器
:nth-child(n)和:nth-of-type(n)比较
div:nth-child(3)：父元素的第3个div元素div:nth-of-type(2): 所有type为div的同级的第二个div- 最大的区别:
nth-of-type是所有层级的范围,div:nth-child(2)不仅限制了是父元素的第二个子元素，且类型为divnth-of-type: 按照元素的类型来选择，.item:nth-of-type{}，如果item对应不同的元素类型，则会分别计算个数，详见末尾例子
几个易忘记的
p:first-line: p元素的首行p:first-letter: p元素的首字母p:first-child: p元素的首个子元素p:last-of-type: 所有层级最后一个p元素p:first-of-type: 所有层级第一个p元素p:only-of-type: 所有层级中唯一为p的元素p:only-child: 父元素只有一个子元素的p元素p:nth-last-child(2): 父元素倒数第二个p元素p:nth-last-of-type(2): 父元素倒数第二个类型为p的元素:root: 文档的根元素p:empty: 选择没有子元素的每个p元素input:enable: 选择每个启用的input元素input:disabled: 选择每个禁用的input元素input:checked: 选择每个选中的input元素:not(p): 选择非p的每个元素::selection: 选择被用户选择元素部分
状态选择器
a:link: 所有未被访问的链接- 注意：浏览器默认的给的是hover的样式,因此只有去改变他的href才能显示对应的样式
a:visited: 选择访问过的链接a:hover: 选择悬浮的链接a:active： 选择活动的链接
注意事项
- 鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义
- 鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义
- 正确顺序a:link、a:visited、a:hover、a:active
关于nth-of-type(n)比较好的例子
标题
第一个.item p
这是锻若
第一个span第一个.item span第二个.item span //我是红色第二个.item p
//我是红色第三个.item p
第四个.item p
复制代码