css选择器大全
1.基本选择器
序号 | 选择器 | 名称 | 说明 | css版本 |
1 | * | 通用选择器 | 选择所有元素,对所有元素设置样式,包括html和body | 2 |
2 | div,span | 标签(元素)选择器 | 根据标签选择元素 | 1 |
3 | # | id选择器 | 选择指定id元素 | 1 |
4 | . | 类选择器 | 选择指定class | 1 |
5 | [attr] | 属性选择器 | 根据元素属性去选择 | 2-3 |
属性选择器的几种用法(了解)
[href] {color: red;} 含有href属性(样式才会生效)
[href][title]{color:red;}同时含有href和title属性。
[href^="http"] {color: red;}以http开头
[href$=".cn"] {color: red;}以.cn结尾
[href*="baidu"] {color: red;}含有baidu这个字符窜
[type="password"] {color: red;}type值为password
[class|="def"] {color: red;}类名为def或者def-开头的class
[title~="big"] {font-size: 30px;}title中属性里含有big这个字符窜。
2. 复合选择器
序号 | 选择器 | 名称 | 说明 | css版本 |
1 | s1,s2,s3 | 分组选择器 | 选择多个选择器的元素,可以避免写重复样式,将重复样式放在一个样式中,给多个元素共享。 | 1 |
2 | s1 s2 | 后代选择器 | 指定选择器的后代元素 | 1 |
3 | s1 > s2 | 子选择器 | 指定选择器的子元素 | 1 |
4 | s1+s2 | 相邻兄弟选择器 | 选择相邻且之后的一个元素 | 1 |
5 | s1~s2 | 兄弟选择器 | 选择且之后的所有兄弟元素 | 2-3 |
3. 伪元素选择器
序号 | 选择器 | 名称 | 说明 | css版本 |
1 | ::first-line | 伪元素选择器 | 块级首行 | 1 |
2 | ::first-letter | 伪元素选择器 | 块级首字母 | 1 |
3 | ::before | 伪元素选择器 | 选择元素之前插入内容 | 2 |
4 | ::after | 伪元素选择器 | 选择元素之后插入内容 | 2 |
5 | ::selection | 伪元素选择器 | 光标滑动选择内容 | 3 |
::after应用较多的地方:清浮动
4. 伪类选择器之结构性伪类选择器(了解)
序号 | 选择器 | 名称 | 说明 | css版本 |
1 | :root | 根元素选择器 | 文档根元素,一般为html | 3 |
2 | :first-child | 子元素选择器 | 第一个子元素 | 2 |
3 | :last-child | 子元素选择器 | 最后一个子元素 | 3 |
5. 伪类选择器之表单元素 (input标签用)(了解)
序号 | 选择器 | 名称 | 说明 | css版本 |
1 | :enabled | 表单 元素选择器 | input非disabled时 | 3 |
2 | :disable | 表单元素选择器 | input标签disabled时 | 1 |
3 | :checked | 表单元素选择器 | input标签checked时 | 2 |
4 | :default | 表单元素选择器 | 浏览器默认选择的那个 | 2 |
6. 伪类选择器之动态伪类
序号 | 选择器 | 名称 | 说明 | css版本 |
1 | :link | 动态伪类选择器 | 未被访问时 | 2 |
2 | :visited | 动态伪类选择器 | 已被访问时 | 1 |
3 | :hover | 动态伪类选择器 | 鼠标以上时 | 2 |
4 | :active | 动态伪类选择器 | 鼠标点击时 | 2 |
5 | :focus | 动态伪类选择器 | 输入框获得焦点时 | 2 |
link/visited/hover/active是有顺序的,其他顺序则无效,如果你只用hover没有限制
focus用在input获取焦点时使用。
总结:在写网页的过程中用的较多的有类选择器、id选择器、分组选择器、后代选择器、伪类选择器::after ::before、:hove