标签、id、class、属性选择器
- CSS选择器用于定位我们想要给予样式的HTML元素
- 常用的选择器分类
- 元素选择器（标签选择器）
- p { font-size: 14px; }
- ID选择器
-
item { display: block; }
-
- class选择器
- .class { display: flex; }
- 通用没选择器
- { color: red; }
- 元素选择器（标签选择器）
- 属性选择器
- [attr]选择包含 attr 属性的所有元素，不论 attr 的值是什么
- [attr=val] 仅选择 attr 属性被赋值为 val 的所有元素
[disabled] { border: 1px solid red; } [data-color="gray"] { color: #666; }
- 不常用的属性选择器
- [attr~=val] 仅选择 attr 属性的值（以空格间隔出多个值）中有包含val值得所有元素，比如位于被空格分隔的多个类（class）中的一个类
- [attr*=val]选择attr属性的值包含字符串val的元素。
- [attr^=val]选择attr属性以val开头（包含val）的元素
- [attr$=val]选择attr属性以val结尾（包含val）的元素
- [attr|=val]选择attr属性的值是val或以val-开头的元素（-用来处理语言编码）
组合选择器
- 将刚刚讲的几种选择器组合到一起
- A, B
- A， B可以同时被选中
- A B
- 选中A的后代B元素（空格要保留）
- A > B
- 选中 A 的直接子元素 B
- A + B
- 选中匹配 B 且匹配 A 的元素的下一相邻元素
- A ~ B
- 选中匹配B且匹配A的元素的下N个相邻元素
伪类first-child、first-of-type
- 伪类
- :pseudo-class-name
- 伪类是一个选择器，用来选择处于特定状态的元素。
- 比如某种类型元素的第一个、元素的鼠标放置上的状态
- 类似于给元素加一个额外的class
.box :first-child{ color: red; } .box :last-child { color: blue; } .box :nth-child(2n+1){ color: pink; }
- :pseudo-class-name
- 伪类/first-of-type：以类型作为判断
- 作为自己父亲当前标签类型的第x个孩子
- first-of-type、last-of-type\nth=of-type(n)
- [图片上传失败...(image-fe69e2-1615452107846)]
- 作为自己父亲当前标签类型的第x个孩子
image.png
更多伪类
- :link
- 选中未访问的链接
- :hover
- 选中鼠标放置上的链接
- :active
- 选中鼠标按下未松开时的链接
- :visited
- 选中访问过的链接
- 顺序
- :link-:visited-:hover-:active
- :checked
- 选中被勾选的表单元素
- :disabled
- 选中被禁用的表单元素
- :focus
- 选中被激活的表单元素
- :root
- 选中根节点<html>
- 可以放属性变量，属性变量就是--name: value，后面一个值，在后面使用的时候就直接用var(--name)
不用JS实现Tab的两种方法
不太常用，但是面试中经常被问到
- :target
- 选中页面上id为当前hash的元素
- image.png
- 一开始会什么都看不见
- image.png
- 可以通过checkbox和video实现
- image.png
- :not(xx)
- 选中不为xx的元素
伪元素
- ::pseudo-element-name
- 其表现像给元素里添加了个标签，而不类似于给元素添加class
- 早期的微元素也使用两个点:，现在浏览器支持早期用法
- ::before、::after
- 在元素内插入一段内容，作为元素的第一个/最后一个 孩子
- 必须有content属性
- 常用来替代图标、无实际意义的标签
- image.png
- ::first-line
- 选中段落中的第一行
- ::first-letter
- 选中段落的第一个字符
- ::selection
- 匹配被鼠标选中的文字内容
