CSS3选择器

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

1.介绍

1.现状

• 浏览器支持程度不够好，有些需要添加私有前缀
• 移动端支持优于pc端
• 应用广泛，不断改进中

2.应对策略

• 渐进增强（低版本能正常访问，高版本注重用户体验）；
• 考虑用户群体；
• 遵照产品方案。

3.参考手册：http://css.doyoe.com/

4.符号问题：{}，*，？，[],|,||与正则的含义相同

2.选择器

CSS3选择器与 jQuery 中所提供的绝大部分选择器兼容。

• 属性选择器
• 结构伪类选择器
• 伪元素选择器

2.1 属性选择器

1.标志是[ ]

2.匹配含义： ^：开头 ； $：结尾； *：包含

3.格式举例：E[title] 选中页面的E元素，并且E存在 title 属性即可。

2.2 伪类选择器

1.标志是 :

2.常见：如超链接中的“love hate”（:link、:visited、:hover、:active）

3.格式举例：

li：first-child//匹配其父的第1个子元素
li：last-child
li:nth-child(n)
li:nth-child(2n)/*偶数*/
li:nth-child(2n+1)
li:nth-last-child(n)/*倒数第n个子元素*/
li:nth-child(-n+5)/*前5个*/

4.对同级兄弟元素，把child改为of-type，（从本身算第一个，找同种类型，不用找爹和不同类型的）如：

5.两者区别，参考 https://www.cnblogs.com/xuan52rock/p/4416228.html

2.3 伪元素选择器

• 标志是 ::
• E::after、E::before配合content使用

span:before{
	  content:"hyo";
}