CSS新手入门笔记整理:CSS3选择器

属性选择器

属性选择器,指的是通过"元素的属性"来选择元素的一种方式。

语法

复制代码
元素[attr^="xxx"]{}
元素[attr$="xxx"]{}
元素[attr*="xxx"]{}

|-------------------|--------------------------------|
| 选择器 | 说明 |
| E[attr^="xxx"] | 选择元素E,其中E元素的attr属性是以xxX开头的任何字符 |
| E[attr$="xxx"] | 选择元素E,其中E元素的attr属性是以xxX结尾的任何字符 |
| E[attr*="xxx"] | 选择元素E,其中E元素的attr属性是包含xXX的任何字符 |


子元素伪类选择器

子元素伪类选择器,指的就是选择某一个元素下的子元素。

第一类

|----------------|----------------------------------------------------------|
| 选择器 | 说明 |
| E:first-child | 选择父元素下的第一个子元素(该子元素类型为E,以下类同) |
| E:last-child | 选择父元素下的最后一个子元素 |
| E:nth-child(n) | 选择父元素下的第n个子元素或奇偶元素,n取值有3种:数字、odd(奇数列)和even(偶数列),其中n从1开始。 |
| E:only-child | 选择父元素下唯一的子元素,该父元素只有一个子元素 |

语法

复制代码
父元素 E:first-child{}
父元素 E:last-child{}
父元素 E:nth-child(n){}
父元素 E:only-child{}

第二类

|------------------|----------------------------------------------------------|
| 选择器 | 说明 |
| E:first-of-type | 选择父元素下的第一个E类型的子元素 |
| E:last-of-type | 选择父元素下的最后一个E类型的子元素 |
| E:nth-of-type(n) | 选择父元素下的第n个E类型的子元素或奇偶元素,n取值有3种数字、odd(奇数列)和even(偶数列),n从1开始 |
| E:only-of-type | 选择父元素下唯一的E类型的子元素,该父元素可以有多个子元素 |

语法

复制代码
父元素 E:first-of-type{}
父元素 E:last-of-type{}
父元素 E:nth-of-type(n){}
父元素 only-of-type{}

区别

:first-child在选择父元素下的子元素时,不仅要区分元素类型,还要求是第一个子元素。而:first-of-type在选择父元素下的子元素时,只需要区分元素类型,不要求是第一个子元素。


UI伪类选择器

  • UI伪类选择器,指的是针对"元素的状态"来选择元素的一种伪类选择器。UI,全称"User Interface",用户界面。
  • 元素的状态包括:可用、不可用、选中、未选中、获取焦点、失去焦点等。
  • UI伪类选择器特点是:对于指定的样式,在默认状态下不起作用,只有当元素处于某种状态时才起作用。
  • 大多数UI伪类选择器都是针对表单元素的。

|-------------|-----------------|
| 选择器 | 说明 |
| :focus | 定义元素获取焦点时使用的样式。 |
| ::selection | 定义页面中被选中文本的样式。 |
| :checked | 定义页面中被选中文本的样式。 |
| :enabled | 定义表单元素"可用"时的样式 |
| :disabled | 定义表单元素"禁用"时的样式 |
| :read-write | 定义表单元素"可读写"时的样式 |
| :read-only | 定义表单元素"只读"时的样式 |

语法

复制代码
表单元素 :focus{}
表单元素 ::selection{}
表单元素 :checked{}
表单元素 :enabled{}
表单元素 :disabled{}
表单元素 :read-write{}
表单元素 :read-only{}

其他伪类选择器

|---------|--------------------------------------------------|
| 选择器 | 说明 |
| :root | 选择HTML页面的根元素<html></html>。 |
| :empty | 选择一个"不包含任何子元素和内容"的元素即空元素。 |
| :target | 选取页面中的某一个target元素。target元素指的是id被当成页面的锚点链接来使用的元素。 |
| :not() | 选取某一个元素之外的所有元素。 |

语法

复制代码
:root{}
:empty{}
:target{}
:not(){}

相关推荐
吃饺子不吃馅1 分钟前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒43 分钟前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode14 小时前
iOS 苹果内购 Storekit 2
前端