CSS - 深入理解选择器的使用方式

在 CSS 中,选择器用于准确地定位和选择需要应用样式的 HTML 元素。以下是对常见选择器使用方式的详细讲解:

元素选择器:

这是最基本的选择器类型,直接指定 HTML 元素的名称。例如, div 选择器会选择所有的 <div> 元素, span 选择器会选择所有的 <span> 元素。通过元素选择器,可以为特定类型的元素应用统一的样式。

类选择器:

类选择器以 . 开头,后面跟着自定义的类名。类名可以由字母、数字、连字符和下划线组成。在 HTML 中,通过 class 属性将类应用到元素上,例如 <div class="my-class"> 。然后在 CSS 中使用 .my-class { /* 样式规则 */ } 来为具有该类的元素设置样式。类选择器的优点是可以将相同的样式应用于多个不同的元素,提高代码的复用性。

ID 选择器:

ID 选择器以 # 开头,后面跟着唯一的 ID 名称。在 HTML 中,通过 id 属性为元素分配 ID,例如 <div id="my-id"> 。在 CSS 中使用 #my-id { /* 样式规则 */ } 来设置样式。需要注意的是,在一个 HTML 文档中,每个 ID 应该是唯一的,不能在多个元素上重复使用相同的 ID。

通用选择器:

* 是通用选择器,它会选择文档中的所有元素。虽然可以使用通用选择器来快速设置一些基本样式,但过度使用可能会影响性能,并且在大多数情况下不是一个最佳实践。

组合选择器:

后代选择器:

通过在两个选择器之间添加空格来表示后代关系。例如, div p 会选择所有在 <div> 元素内部的 <p> 元素,无论 <p> 元素是直接子元素还是更深层次的后代元素。

子选择器:

使用 > 符号来指定直接子元素关系。例如, div > p 只会选择直接作为 <div> 元素子元素的 <p> 元素,而不会选择 <div> 元素内部的嵌套 <p> 元素。

相邻兄弟选择器:

使用 + 符号来选择紧挨着前一个元素的兄弟元素。例如, h1 + p 会选择紧接在 <h1> 元素之后的第一个 <p> 元素。

通用兄弟选择器:

使用 ~ 符号来选择前一个元素之后的所有兄弟元素。例如, h1 ~ p 会选择所有在 <h1> 元素之后的 <p> 元素。

属性选择器:

简单属性选择器:

attribute\] 会选择具有指定属性的元素,无论属性值是什么。例如, \[href\] 会选择所有具有 href 属性的元素。 具体属性值选择器: \[attribute="value"\] 会选择具有指定属性且属性值完全匹配的元素。例如, \[href="https://www.example.com"\] 会选择 href 属性值为 https://www.example.com 的元素。 部分属性值匹配选择器: 还可以使用 \^ (以指定值开头)、 $ (以指定值结尾)、 \* (包含指定值)来进行部分匹配。例如, \[href\^="https"\] 会选择 href 属性值以 https 开头的元素, \[href$=".com"\] 会选择 href 属性值以 .com 结尾的元素, \[href\*="example"\] 会选择 href 属性值包含 example 的元素。 伪类选择器: 链接伪类: - :link 用于选择未被访问过的链接。 - :visited 用于选择已被访问过的链接。但由于隐私原因,对于 :visited 伪类,只能设置颜色相关的样式。 用户行为伪类: - :hover 用于当鼠标指针悬停在元素上时。 - :active 用于当元素被激活(如鼠标按下)时。 - :focus 用于当元素获得焦点时,常见于表单元素如输入框、按钮等。 结构伪类: - :first-child 选择父元素的第一个子元素。 - :last-child 选择父元素的最后一个子元素。 - :nth-child(n) 可以根据参数 n 的值选择父元素的特定子元素。 n 可以是具体的数字、表达式(如 2n 表示偶数位置的子元素, 2n + 1 表示奇数位置的子元素)或关键字(如 even 表示偶数位置, odd 表示奇数位置)。 - :first-of-type 选择属于其父元素的同类型子元素中的第一个。 - :last-of-type 选择属于其父元素的同类型子元素中的最后一个。

相关推荐
海底火旺30 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
Allen Bright3 小时前
【CSS-15】深入理解CSS transition-duration:掌握过渡动画的时长控制
前端·css
到底起什么网名才能不重名19 小时前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
sunbyte20 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
码哥DFS1 天前
Flex布局原理
前端·css·css3
小飞悟1 天前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
晴殇i1 天前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
Liudef062 天前
2048小游戏实现
javascript·css·css3
小桥风满袖2 天前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Hilaku2 天前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html