CSS3 选择器总结

来源:互联网 发布:linux创造普通用户 编辑:程序博客网 时间:2024/06/05 00:14

选择器
这里写图片描述

这里写图片描述

这里写图片描述

id 类 属性 后代 直接子代(>) 兄弟(sbling) 群组(,)

注意:属性选择器 ~ 表示的是单次 ; * 表示的是包含; | 表示的是 以value 开头或则 value-。

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

**注意:
1.first-child last-child 和 nth-child(n) nth-last-child(n) nth-first-child(n) 他们选择的时候是必须按着标签顺序选的。
2. first-of-type last-of-type 和 nth-of-type(n) nth-last-of-type(n) 他们选择不用遵循顺序
以上两种的主要区别 相同点 :都是以父元素为准 。不同点:有type代表是一类元素来选,不要顺序。没有则相反。 有n知道顺序 nth。 没有只是简化了操作**

3.only-child: 父类唯一子元素(标签) 且必须在第一个。 only-of-type:父类有多个子元素,顺序无所谓 但只能有一个标签。

这里写图片描述

这里写图片描述

重点内容
伪元素开始了

这里写图片描述

这里写图片描述

这里写图片描述

伪元素和伪类区别:伪类是找标签 伪元素是控制标签里的内容 总结
1.:: 和: 都可以用 2.after 和before 插入的都是行