通知短信+运营短信,5秒速达,支持群发助手一键发送🚀高效触达和通知客户 广告
[TOC] # 常用选择器(4种) ``` 1. *通配符 2. E 标签选择器/类型选择器 3. .class 类选择器 4. #id id选择器 ``` > id不能以数字开头,某些解析器会出错 > id中不能出现空格 > 中间可以出现数字、_或-开头 > id是唯一的,如果存在多个,CSS依旧有效,但JavaScript只取第一个 ## 案例1:消除所有标签的默认样式(eg. p标签) ![](https://img.kancloud.cn/48/ff/48ff8f877728c4f969962a82776b193e_423x236.png) ## 案例2:练习使用不同的选择器 ![](https://img.kancloud.cn/01/5a/015ab59e54faa6b10ce3b885acf7e6dc_555x287.png) # 组合选择器(6种) ``` 1. E F 后代选择器 2. E>F 父子选择器 3. E+F 相邻兄弟选择器 4. E~F 普通兄弟选择器 5. E,F 或选择器 6. E.class E#id派生选择器 ``` ## 案例3:根据要求实现效果 1. 为所有二级选项添加**下划线** 2. 将所有学院的**专业设置为蓝色** 3. 将所有超市的**物品设置为红色** 4. 将“**其他**”的背景设置为**黄色** ![](https://img.kancloud.cn/f2/2c/f22c3da9fb4f4d3cc5ea0b30da6e0801_220x190.png) # 属性选择器(7种) ``` 1. 存在 2. 存在且值等于 = 3. 存在且值开头匹配 ^= 4. 存在且值结尾匹配 $= 5. 存在且值空格分割匹配 ~= 6. 存在且值连接符分割匹配 |= 7. 存在且值包含匹配 *= ``` ## 案例4:根据要求实现效果图 > 1. 安全的链接(https)为蓝色 > 2. 不安全的链接(http)为红色 > 3. 在新窗口打开的有下划线 ![](https://img.kancloud.cn/35/40/3540237ae458628368bbf6f55439c5ce_281x253.png) # 链接伪类选择器(4种) ``` 爱恨原则 link/visited/hover/active ``` ## 案例5:颜色滑块 ![](https://img.kancloud.cn/65/fc/65fce00b947a164e41d62b39f156c2f5_358x246.gif) # 伪元素选择器(6种) ``` 1. 首字母 ::first-letter 2. 首行 ::first-line 3. 前面追加 ::before 4. 后面追加 ::after 5. 被选中的文字 ::selection 6. 提示文字 ::placeholder(chrome支持) ``` ## 案例6:英语排版 > 1. 每个段落首字母大写,字体30px,红色 > 2. 段落的第一行改变颜色 ![](https://img.kancloud.cn/c4/e7/c4e77b7947a9a9364159df779cdaaeed_442x228.png) ## 案例7:改变文本提示文字以及选中文字样式 > 1. 文本框默认提示文字从灰色变为红色 > 2. 网页中选中的文本从蓝色变为黄色 ![](https://img.kancloud.cn/0b/bc/0bbc46ba1d19e3b55446205739adf05f_257x144.png) ``` <style type="text/css"> div::selection{ background-color: yellow; } input::placeholder{ color: red; } </style> ``` ## 案例8:为资源添加图标和提示 ![](https://img.kancloud.cn/d6/06/d60624648f3eafb22ee9f6cbcc3b6807_254x234.png) # 状态伪类选择器(7种) ``` 1. :focus 获得焦点 2. :not(selector) 3. :is(selector) 4. :checked 被选中 5. :disabled 不可用 6. :read-only 只读 7. :empty 标签内容为空 ``` ## 案例9:为所有空单元格添加“/” ![](https://img.kancloud.cn/29/fb/29fb79292abf8a4833f13b3790ad091a_684x120.png) ``` td:empty::after{ content: "/"; } ``` # 结构伪类选择器(10种) ``` 1. E:first-child 2. E:last-child 3. E:only-child 4. E:nth-child(n) 5. E:nth-last-child(n) 6. E:first-of-type 7. E:last-of-type 8. E:only-of-type 9. E:nth-of-type(n) 10. E:nth-last-of-type(n) ``` > 选中的是E,而非E的子元素 ## 案例10:隔行变色 ![](https://img.kancloud.cn/d7/43/d74391b089496ee01a9c7a615fd04e60_543x247.png) # 样式优先级 ``` !important > 行内样式 > ID > 类 | 伪类 | 属性选择 > 标签 > 通配符 > 继承 ``` ![](https://img.kancloud.cn/7c/20/7c20220766aa8de2c7cc9b3551fd8d38_141x103.png) ![](https://img.kancloud.cn/d0/21/d0218a3a1a508bb87dad0432210631dd_593x714.png)