《CSS选择器世界第2版》demo原型页面索引实例页面

展示

第1章

2-1. Shadow DOM与局部作用域 2-2. CSS命名空间和SVG颜色控制

第2章

2-1. @layer规则低级联层级示意 2-2. @layer规则多命名语法示意 2-3. @layer规则嵌套语法示意 4-1. 256个类名选择器优先级大于ID选择器

第3章

2-1. 数字开头的类选择器

第4章

1-1. 标签选择器与任意标签颜色 1-2. 标签选择器与SVG元素设置 1-3. 标签选择器与style样式可编辑

第5章

1-1. 类选择器与文字颜色 1-2. 后代选择器与文字颜色 2-1. 子选择符和后代选择符 3-1. 相邻兄弟选择符 3-2. 相邻兄弟选择符与不同节点类型 3-3. 相邻兄弟选择符与:first-child 3-4. 相邻兄弟选择符与:focus伪类交互 4-1. 随后兄弟选择符和相邻兄弟选择符 4-2. 多种方法模拟前面兄弟选择符

第6章

3-1. 属性选择器与搜索过滤

第7章

1-1. hover与延时显示 1-2. hover显示相邻兄弟元素 1-3. hover显示有间距的相邻图片元素 1-4. focus也能显示tips提示 3-1. focus点击显示二维码图片 3-2. CSS hover显示列表元素与键盘访问 4-1. :focus-within高亮输入框前面的描述文字 4-2. :focus-within实现下拉列表 5-1. :focus-visible匹配时机测试 5-2. :focus-visible与聚焦轮廓控制

第8章

2-1. textarea元素输入验证兼容版 3-1. :only-child伪类与loading模块 3-2. :nth-child与指定区间范围列表高亮 3-3. 动态列表数量匹配技术

第9章

1-1. article标签内的ol, ul样式不重置 2-1. :is()伪类让无效选择器合法 4-1. :has()伪类基本使用

第10章

3-1. :target伪类与显示全部文章内容 3-2. 适合:target伪类的交互实践 3-3. :target伪类实现选项卡切换效果

第11章

1-1. :placeholder-shown与占位符交互 1-2. :default伪类与自动添加推荐 1-3. :default伪类与自动添加推荐 2-1. :checked伪类与展开收起交互效果 2-2. :checked伪类实现选项卡切换效果 2-3. :checked伪类模拟单复选框 2-4. :checked伪类与开关效果 2-5. :checked伪类与各种选择交互实现 2-6. :indeterminate伪类与复选框半选状态 2-7. :indeterminate伪类与单选框组的选择提示 3-1. :invalid伪类验证与实际应用 3-2. :required和:optional伪类标记问卷可选项 3-3. :user-invalid伪类基本使用 4-1. ::placeholder伪元素使用 4-2. ::file-selector-button伪元素使用

第12章

1-1. :defined伪类使用示意 1-2. :defined伪类匹配标准HTML元素 2-1. :host伪类使用示意 3-1. :host()伪类使用示意 4-1. :host-context()伪类使用示意 5-1. ::part伪元素使用示意 5-2. ::part伪元素作用在<slot>元素上

第13章

1-1. :playing和:paused伪类使用示意 2-1. ::cue伪元素和::cue()函数使用示意

第14章

2-1. ::mark伪元素基本使用示意 2-2. ::target-text伪元素基本使用示意

第15章

1-1. :modal伪类与模态层的样式控制 2-1. :fullscreen伪类控制全屏背景半透明 3-1. :picture-in-picture 伪类与模态层的样式控制 4-1. ::backdrop伪元素与蒙层的样式控制