JS DOM 和 CSS 选择器入门教程
选择器(Selector) 用于选取 HTML 元素,既可以用于,在 CSS 中,给对应的元素添加样式,也在 JavaScript 中操作 HTML DOM。由于选择器的用途广泛且重要,所以这个视频整理了常用的选择器的语法规则和效果。
常用选择器?
首先看基础选择器。
基础选择器
类型选择器。用于直接选择 HTML 元素,例如 div,它可以选择 HTML 页面中的所有 div 元素。
ID 选择器。如果 HTML 元素设置了 id 属性,可以直接使用 id 选择唯一的元素,使用#加上 id 属性值。例如选择 id 为 container 的元素。
class 选择器。可以选择 HTML 元素 class 属性,使用.加 class 属性值。因为相同的 class 名字可以用于多个元素中,所以 class 选择器可以选择多个元素,例如选择 class 为 red 的所有元素。
通用选择器。通用选择器为*星号,可以选择页面上的所有元素。
属性选择器。属性选择器可以按元素属性进行选择,使用[]在里边写上属性和值,它有多种形式,常见的有:
- 直接选择具有某个属性的元素,不管它的值是什么,例如选择有 type 属性的元素[type],
- 属性和值精确匹配,使用属性=值形式,例如选择[type="text"]的元素。
- 选择以指定值开头的属性的元素,使用属性名^=值,例如选择 href 以 http 开头的元素[href^="https"],与它类似的还有以指定值结尾的,使用$=。
- 选择属性值 中任意位置出现指定值的元素,使用属性名*=值,例如选择 href 中包含 bilibili 字符的元素[href*="bilibili"]。
多元素选择器
多元素选择器可以同时使用多个基础选择器,选择多个元素,不同选择器之间使用 , 隔开,例如选择所有 class 为 red 的元素,id 为 container 的元素,以及所有 span 元素。
组合选择器
组合选择器用于选择与指定元素有一定关系的元素,它有:
后代选择器。 用空格隔开的多个选择器,后边的选择器会在前边选择的元素中的子元素中进行选择。例如选择 div 下的所有 class 为 red 的子元素。
直接后代选择器。 与后代选择器类似,但只选择第一层子元素,使用 > 隔开多个选择器,例如选择 div 下第一层 class 为 red 的子元素。
邻居选择器。 使用 ~ 隔开,用于选择与前边选择器同级的后续元素,例如选择 div 后边的所有 span 元素。
直接相邻选择器。 使用 + 隔开,与邻居选择器类似,但只选择紧邻的后续元素,即下一个元素,例如选择 div 下边的第一个 span 元素。
总结
好了,以上内容就是选择器相关的介绍,你学会了吗?如果有问题请留言,有帮助请三连,想优雅的学前端,请关注峰华前端工程师,感谢观看!
一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!
即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!
《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。
《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。
《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。
《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买