[快速入门前端 17] CSS 选择器 (7) 选择器总结

基本选择器

选择器说明语法通配符作用範围为所有标籤，用于页面整体样式* { color: red }元素作用于同种标籤，不能进行差异化样式设定p { color: red }类别作用于我们自行设定的类别，是使用频率最高的选择器.myClass { color: red }ID选取当前 ID 相同的唯一元素#myId { color: red }属性选择器用法多元，依属性进行筛选[name="myElement"] { color: red }点我複习

複合选择器

选择器说明语法交集选取满足所有选择器的元素选择器1选择器2...选择器n { color: red } (不空格)併集选取满足任一选择器的元素选择器1, 选择器2, ...选择器n { color: red } (逗号分隔)后代选择器选取符合条件的后代元素元素1 后代 后代的后代 ... 后代n { color: red } (空格分隔)子选择器选取符合条件的(直接)子元素元素1>子代>子代的子代>...子代n { color: red } (> 号分隔)点我複习

伪类选择器

动态伪类

选择器说明搭配元素语法:link未访问过的连结只能用于 a 连结相关元素a:link{ }:visited已访问过的连结只能用于 a 连结相关元素a:visited{ }:hover滑鼠悬在至元素上时可用于所有元素a:hover{ }:active点该击元素时可用于所有元素a:active{ }:focus该元素被 focus 时只能用于表单输入类元素input:focus{ }点我複习

结构伪类

选择器说明补充:root代表根元素，也就是  标籤。几乎不会用到:first-child选择第一个子元素 (不论是否为同类标籤):last-child选择最后一个子元素 (不论是否为同类标籤)与 first-child 相反，从后数到前:first-of-type选择第一个同类子元素 (同标籤的第一个子元素):last-of-type选择最后一个同类子元素 (同标籤的最后一个子元素)与 first-of-type 相反，从后数到前:nth-child(n)选择第 n 个子元素n 中可以写数字、基偶数关键字、an+b 公式:nth-last-child(n)倒数第 n 个子元素与 nth-child 相反，从后数到前:nth-of-type(n)选择第 n 个同类子元素:nth-last-of-type(n)倒数第 n 个类子元素与 nth-of-type 相反，从后数到前:only-child没有任何兄弟元素的子元素独生子的概念点我複习

其他伪类

选择器说明补充:checked勾选状态的单多选框有些预设样式不可修改，例如背景颜色:disabled禁用状态的元素:enabled可用状态的元素较少用:not(基本选择器)选取除了括号内选择器的元素括号内只能放基本选择器，不可再嵌套一个 not:target锚点的目标元素:lang(语言)选取 lang 属性值相符的元素必须搭配 lang 属性使用点我複习

伪元素选择器

选择器说明补充::first-letter元素内容的第一个字元::first-line元素内容的第一行::selection滑鼠选中的内容::placeholder文字框提示文字::before于元素内容前新增一个元素content 为必要属性::after于元素内容后新增一个元素content 为必要属性点我複习

---

上一篇：[快速入门前端 16] CSS 选择器 (6) 伪元素选择器
下一篇：[快速入门前端 18] CSS 选择器的权重
系列文章列表：[快速入门前端] 系列文章索引列表