#书摘 #css #前端
《CSS 选择器世界》nth-child()的参数索引特性
对于nth-child()、nth-last-child() 以及8.4.3节要介绍的 nth-of-type()、nth-last-of-type()，还有一种大家可能没见过的语法，就是使用 of 关键字配合特性的CSS选择器，对已经匹配的树结构元素进行进一步的匹配。例如，有如下HTML结构和CSS代码：


<dl>
<dt>标题</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
<dt>标题</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
<dt>标题</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
</dl>
dl > :nth-child(even of dd) {
color: red;
font-weight: bold;
}​​


表示匹配所有子元素集合中的偶数项的 <dd> 元素。

顺便提一下，选择器:nth-child(even of dd)和选择器dd:nth-child(even)是不一样的，even关键字是相对整个子元素而言的，而不是仅相对于 <dd> 元素。

另外，of后面的选择器除了标签选择器，类名选择器、属性选择器都是支持的，可以让子元素的匹配更加精准可控。可惜这个特性目前仅被Safari浏览器支持，Chrome等浏览器暂时没有支持的迹象，因此，大家先了解即可。

https://memo.cosine.ren/m/353

#博客更新
NestJS 学习之优秀项目分析与最佳实践
这篇写的超用心！一不小心一天就过去了。

AI 生成的摘要：这篇文章是关于NestJS学习的优秀项目分析与最佳实践。文章介绍了NestJS的基本概念和模块，并通过分析优秀项目和代码示例来帮助读者更好地理解和应用NestJS。文章还解释了常见的后端术语和目录结构，以及模块、服务、控制器等的作用和用途。通过阅读这篇文章，读者可以更全面地了解NestJS的架构和设计理念，提高后端开发的效率和自信。

Hexo博客链接🔗 https://ysx.cosine.ren/nest-learn-project-1
xLog链接🔗 https://x.cosine.ren/nest-learn-project-1
RSS订阅 📢 https://x.cosine.ren/feed/xml

#书摘 #css #前端
《CSS 选择器世界》:nth-child()伪类和:nth-last-child()伪类
:nth-last-child()伪类和:nth-child()伪类的区别在于：
:nth-last-child()伪类是从后面开始按指定序号匹配，而:nth-child()伪类是从前面开始匹配。

除此之外，无论是在兼容性还是语法方面，两者都没有区别。因此，本节会以:nth-child()为代表对这两个伪类进行详细且深入的介绍。

1. 从:nth-child()开始说起
在介绍语法之前，有必要提一句，:nth-child()伪类虽然功能很强大，但只适用于内容动态、无法确定的匹配场景。如果数据是纯静态的，哪怕是列表，都要使用类名或者属性选择器进行匹配。没有必要使用 :nth-child()，因为这样会增加选择器的优先级，且由于DOM结构严格匹配，无法随意调整，不利于维护。

:nth-child()伪类可以匹配指定索引序号的元素，支持一个参数，且必须有参数，参数可以是关键字值或者函数符号这两种类型。
(1)关键字值的形式如下。
● odd ：匹配第奇数个元素，如第1个元素、第3个元素、第5个元素……
● even ：匹配第偶数个元素，如第2个元素、第4个元素、第6个元素……
可以这样记忆：如果字母个数是奇数（odd有3个字母），就匹配奇数个数的元素；如果字母个数是偶数（even有4个字母），就匹配偶数个数的元素。
奇偶匹配关键字多用在列表或者表格中，可以用来实现提升阅读体验的斑马线效果。
(2)函数符号的形式如下。
● An+B：其中A和B都是固定的数值，且必须是整数；n可以理解为从0开始的自然数序列(0, 1, 2, 3, …)，n前面可以有负号。第一个子元素的匹配序号是1，小于1的计算序号会被忽略。
下面来看一些示例，快速了解一下各种类型的参数的含义。
● tr:nth-child(odd) ：匹配表格的第1, 3, 5行，等同于tr:nth-child(2n+1)。
● tr:nth-child(even) ：匹配表格的第2, 4, 6行，等同于tr:nth-child(2n)。
● :nth-child(3) ：匹配第3个元素。
● :nth-child(5n) ：匹配第5, 10, 15, …个元素。其中5=5×1，10=5×2，15=5×3……
● :nth-child(3n+4) ：匹配**第4, 7, 10, …个元素**。其中4=(3´0)+4，7=(3´1)+4，10=(3´2)+4……
● :nth-child(-n+3) ：匹配**前3个元素**，因为−0+3=3，−1+3=2，−2+3=1。
● li:nth-child(n) ：匹配所有的 <li> 元素，就匹配的元素而言和li标签选择器一模一样，区别是优先级更高了。实际开发中总是避免过高的优先级，因此没有理由这样使用。
● li:nth-child(1) ：匹配第一个 <li> 元素，和li:first-child匹配的作用一样，区别是后者的兼容性更好，因此，**也没有这样使用的理由**，可以使用li:first-child代替。
● li:nth-child(n+4):nth-child(-n+10) ：匹配第4～10个 <li> 元素，这个就属于比较高级的用法了。例如，考试成绩前3名的有徽章，第4名～第10名的高亮显示，此时，这种**正负值组合**的伪类非常好用。

2. 动态列表项数量匹配技术
聊天软件中的群头像或者一些书籍的分组往往采用复合头像作为一个大的头像，可以看到如果头像数量不同，布局就会不同。（如微信群组）

借助子索引伪类自动判断列表项的个数，从而实现我们想要的布局。在这个方法中，不需要在父元素上设置当前列表项的个数，因此，HTML看起来平淡无奇：

<ul class="box">
<li></li>
<li></li>
<li></li>
...
</ul>​​


关键在于CSS，我们可以借助伪类判断当前列表项的个数，示意代码如下：

/* 1个 */
li:only-child {}
/* 2个 */
li:first-child:nth-last-child(2) {}
/* 3个 */
li:first-child:nth-last-child(3) {}
...​​


> 其中，:first-child:nth-last-child(2) 表示当前 <li> 元素既匹配第一个子元素，又匹配从后往前的第二个子元素，因此，我们就能判断当前总共有两个 <li> 子元素，从而精准实现我们想要的布局了，只需要配合使用相邻兄弟选择符加号(+)以及兄弟选择符(~)。例如：


/* li列表项的数量大于或等于5时所有元素宽度为33.333% */
li:first-child:nth-last-child(n+5),
li:first-child:nth-last-child(n+5) ~ li {
width: calc(100% / 3);
}​​


以上是不是一个非常巧妙的实现呢？
总之，基于上面的数量匹配原理就能自动实现不同列表项数量下的不同布局效果，而无须设置专门表示列表项数量的类名或者属性。
读者可以手动输入 https://demo.cssworld.cn/selector2/8/3-3.php 体验与学习。

https://memo.cosine.ren/m/351

demo.cssworld.cn

动态列表数量匹配技术 » CSS选择器世界demo演示

CSS选择器世界demo实例演示页面之 动态列表数量匹配技术

#书摘 #css #前端
《CSS 选择器世界》比较实用的子索引伪类
本节要介绍的伪类都是用来匹配子元素的，子元素必须是独立标签的元素，文本节点、注释节点是无法匹配的。
如果想要匹配文字，只有::first-line和::first-letter两个伪元素可以实现，且只有部分CSS属性可以应用，这里不展开介绍。

1. :first-child 伪类和 :last-child 伪类
:first-child 伪类可以匹配第一个子元素，:last-child 伪类可以匹配最后一个子元素。
2. 给力的 :only-child 伪类
:only-child 也是一个很给力的伪类，尤其在处理动态数据的时候，可以省去很多JavaScript逻辑代码。
我们先来看一下这个伪类的基本含义，:only-child，顾名思义，就是匹配没有任何兄弟元素的元素。
例如，:only-child伪类可以匹配下面的 <p> 元素，因为其前后没有其他兄弟元素：

<div class="cs-confirm">
<!-- 可以匹配:only-child伪类 -->
<p class="cs-confirm-p">确定删除该内容？</p>
</div>​​


另外，:only-child 伪类在匹配元素的时候会忽略其前后的文字内容。例如：

<button class="cs-button">
<!-- 可以匹配:only-child伪类 -->
<i class="icon icon-delete"></i>删除
</button>​​


虽然.icon元素后面有“删除”文字，但由于没有标签嵌套，是匿名文本，因此不影响:only-child伪类匹配.icon元素。

尤其需要指出的是，使用:only-child的场景是动态场景，也就是对于某个固定的小模块，根据场景的不同，里面可能是一个子元素，也可能是多个子元素，元素个数不同，布局方式就会不同，此时就是:only-child伪类大放异彩的时候。例如，某个正在加载(loading)的模块里面可能只有一张加载图片，也可能仅有一段加载文字，也可能是加载图片和加载文字兼有，此时:only-child伪类非常好用。

https://memo.cosine.ren/m/350

#书摘 #css #前端
《CSS 选择器世界》empty伪类应用场景
:empty伪类与::before/::after伪元素
::before 和::after 伪元素可以给标签插入内容、图形，但这样会不会影响:empty伪类的匹配呢？答案是：不会。这一特性非常实用。
无论是大项目还是小项目，都会用到:empty伪类。主要有下面几种场景。
1. 隐藏空元素
例如，某个模块里面的内容是动态的，其可能是列表，也可能是按钮，这些模块容器常包含影响布局效果的CSS属性，如margin、padding属性等。当然，这些模块里面有内容的时候，布局显示效果是非常好的。然而，一旦这些模块里面的内容为空，页面上就会有很大一块明显的空白，布局效果就不好，这种情况下使用:empty伪类予以控制就再好不过了：


.cs-module:empty {
display: none;
}​​


无须额外的JavaScript逻辑判断，直接使用CSS就可以实现动态样式效果。唯一需要注意的是，当列表内容缺失的时候，一定要把空格也去掉，否则 :empty 伪类不会匹配。

2. 字段缺失智能提示
例如，下面的HTML代码：

<dl>
<dt>姓名：</dt>
<dd>张三</dd>
<dt>性别：</dt>
<dd></dd>
<dt>手机：</dt>
<dd></dd>
<dt>邮箱：</dt>

<dd></dd>

</dl>​​


用户某些字段的信息是缺失的，此时开发人员应该使用其他占位符示意这里没有内容，例如用短横线(-)或者直接使用文字提示。但多年的开发经验表明，开发人员非常容易忘记这里需要的特殊处理，最终导致布局混乱，信息难辨。
但如今，我们不用再担心这样的问题了，直接使用CSS就可以处理这种情况，代码很简单：


dd:empty::before {
content: '暂无';
color: gray;
}​​


这样的布局效果良好，信息明确。存储的是什么数据内容，直接输出的就是什么内容，就算数据库中存储的是空字符也无须担心。
实际开发中，类似的场景还有很多。例如，表格中的备注信息通常都是空的，此时可以这样处理：

td:empty::before {
content: '-';
color: gray;
}​​


除此之外，还有一类典型场景需要用到:empty伪类，那就是Ajax动态加载数据为空的情况。当一个新用户开始使用一个产品的时候，很多模块内容是没有的。要是在过去，我们需要在JavaScript代码中做if判断，如果没有值，我们要输出“没有结果”或者“没有数据”的信息。但是现在有了:empty伪类，直接把这个工作交给CSS就可以了。例如：


.cs-search-module:empty::before {
content: '没有搜索结果';
display: block;
line-height: 300px;

text-align: center;
color: gray;
}​​


总之，这种方法非常好用，可以节约大量的开发时间，同时用户体验更好，维护更方便，因为可以使用一个通用类名使整站提示信息保持统一：


.cs-empty:empty::before {
content: '暂无数据';
display: block;
line-height: 300px;
text-align: center;
color: gray;

}​​



ps: 个人感觉有用，但不多，但有用
https://memo.cosine.ren/m/349

#书摘 #css #前端
《CSS 选择器世界》empty伪类
先来了解一下 :empty 伪类的基本匹配特性。
1. :empty 伪类用来匹配空标签元素。例如：

<div class="cs-empty"></div>

.cs-empty:empty {

width: 120px;

padding: 20px;

border: 10px dashed;
}​​


此时，:empty伪类会匹配 <div> 元素，呈现为虚线框。

2. :empty伪类还可以匹配前后闭合的替换元素，如 <button> 元素和 <textarea> 元素。例如：


<textarea></textarea>
textarea:empty {

border: 6px double deepskyblue;

}​​


在所有浏览器下都呈现为双实线

3. :empty伪类还可以匹配非闭合元素，如 <input> 元素、`<img>` 元素和 <hr> 元素等。但实际开发中很少有需要使用:empty伪类匹配非闭合元素的场景。

4. :empty伪类可以匹配什么样的元素？如果没有深入研究，你大概会认为:empty伪类可以匹配没有任何子元素、不显示任何内容的元素。但如果深入细节，就会发现这其中存在误解。
- :empty伪类与空格
如果元素内有注释，:empty伪类是否可以匹配？多数人会觉得不匹配，这是完全正确的。例如：

<!-- 无法匹配:empty伪类 -->

<div class="cs-empty"><!-- 注释 --></div>​​


但如果元素内有一个空格或者标签内有换行符呢？实际上，:empty伪类依然无法匹配。例如，有以下两种情况。
- 不能有空格：


<!-- 无法匹配:empty伪类 -->
<div class="cs-empty"> </div>​​


- 不能有换行符：


<!-- 无法匹配:empty伪类 -->
<div class="cs-empty">
</div>​​


因此，实际开发的时候，如果遇到:empty伪类匹配无效的场景，要仔细查看HTML代码，看看标签内是否有空格或者换行符。尤其是使用一些渲染模板的时候，明明没有任何列表内容，但:empty伪类就是无法匹配，这可能是换行符或者空格导致的。不过根据具体实践，一些流行的开发框架（如Vue等）会自动去除空格，这有利于在实际项目中灵活使用:empty伪类。
:empty伪类忽略空格的特性不符合我们的直观认知，W3C官方也收集到了很多这样的意见，所以**在CSS选择器Level 4规范中已经开始明确:empty伪类可以匹配只有空格文本节点的元素**，但是直到撰写本章的时候还没有任何浏览器支持。因此，为安全起见，实际开发中大家还是按照无空格标准来进行。

https://memo.cosine.ren/m/348

#书摘 #css #前端
《CSS 选择器世界》 :root伪类
:root伪类用来匹配文档的根元素，下面进行详细分析。
由于没有特别需要使用:root伪类的理由，反正匹配的是 <html> 元素，因此为何不直接使用html标签选择器呢？这样兼容性更好，优先级更低，是这样吗？
实际上，下面两个开发场景中更推荐使用:root伪类。
1. 利用:root伪类的高优先级
假设引入了某些UI组件库，如果这些组件对html标签进行了一些设置，而这些设置是开发人员不需要的，我们就可以使用:root伪类进行重置，因为:root伪类的优先级更高，不用担心不能重置。例如设置了如下的CSS：

html {
overflow-y: scroll;
}​​


我们就可以用如下代码重置，以确保页面内容在加载过程中不会出现晃动。


:root {

overflow-y: auto;
scrollbar-gutter: stable;
}​​


另外，借助 :root 伪类提高任意选择器的优先级也是一种常见的技巧，例如类名 .recover 不能重置某些样式，可以在其前面加上 :root，变成 :root .recover，说不定就可以重置了，毕竟任何页面都一定有根元素（除了根元素 svg 等特殊场景），这种写法要比 .recover.recover 的性能提高不少。

2. CSS变量
现代浏览器都已经支持CSS自定义属性（也就是CSS变量），其中有一些变量是全局的，如整站的颜色、主体布局的尺寸等。对于这些变量，业界约定俗成，都将它们写在:root伪类中。
大家千万不要以为将CSS变量写在:root伪类中有什么特别的作用，这只是一种写法而已，其效果和写在html标签选择器中是一样的，因为全局CSS变量一定都是用以继承的，只要是级别足够高的祖先选择器都可以。
之所以CSS变量都写在:root伪类中，可能是因为这样可以使代码的可读性更好。同样是根元素，html标签选择器负责样式，:root伪类负责变量，互相分离，各司其职。

https://memo.cosine.ren/m/347

#前端 #阮一峰的科技周刊
科技爱好者周刊（第 272 期）：Unity 的安装费，游戏业的缩影


#优质博文 #资源推荐 #tools
1. 1024以后的端口（英文） 📓 Linux 系统保留了小于1024的端口（0-1023），供系统使用，其他端口由用户自己分配。本文总结了被各种常见应用占用的大于1024的端口。

2. 视口碎片化（英文） 📓 浏览器窗口大小（又称视口）到底有多少种？一家设计公司尝试进行统计，结果有2300种之多。

3. AWS SES 如何申请进入生产模式（中文）📓 SES 是亚马逊的邮件发送服务，但是开通这个服务，需要写申请邮件，说清楚用途。作者分享了自己的申请经验。

4. Linkwarden 🧰 一个开源的桌面程序，用来管理网络书签。

5. v0 🧰 #AI Vercel 推出的一个实验性产品，使用 AI 网页生成网页。（好东西，快去申请）
你用文字描述想要什么页面，它会给出三个 UI 设计，让你选一个，然后生成该页面的 React + Tailwind CSS 实现，并允许不断微调。官网有很多作品展示，其中有几个相当可以。它应该是目前最强的 AI 网页生成器。现在还处于 Alpha 阶段，使用资格需要排队等待开通。

6. 讯飞星火认知大模型 🧰 讯飞公司的 AI 大模型，可以根据提示生成 PPT 和简历，以及文档问答。

7. Subdomain Center 🧰 #站长工具 该网站可以查询一个域名有多少个子域名，点击查询框后，通过可以直接改地址栏的 URL 来查询。它的代码开源。
ps：评论有人提供了更强的 OneForAll

8. Sqids 🧰 一个生成短字母 ID 的库，有各种主要语言的版本。

9. Webrecorder 🧰 一个工具包，用来保存交互式网页，做到离线时也能尽可能准确地重现它。

10. 下面两个网站，可以查询某个 IP 地址的地域归属。
- ipinfo.io 🧰
- ipapi.is 🧰
这两个网站还都提供免费的数据库下载

Matt-Rickard

De Facto Ports

Most applications communicate over a TCP or UDP port. Ports 0-1023 are usually privileged and require administrator or superuser access to bind a network socket to an IP with the corresponding port. But anything over 1024 is up for grabs. IANA (Internet Assigned…

Dynadot 推出 .gay 域名首年免费活动

为庆祝 .gay 域名三周年，该服务商推出了这一活动。

Dynadot 说自 2020 年推出以来， .gay 域名不仅在互联网上开辟了一个充满活力、包容性的空间，而且从根本上重塑了 LGBTQ+ 社区及其盟友的数字格局。

活动时间 9 月 19 日 - 9 月 27 日
优惠码 DOTGAY23

领取地址

#书摘 #css #前端
《CSS 选择器世界》键盘焦点伪类 :focus-visible
:focus-visible 伪类虽然和 :focus-within 伪类看起来很相似，但两者的作用大相径庭，被浏览器开始支持的时间也有较大区别：:focus-within伪类已被浏览器支持很多年了，而:focus-visible伪类则在2022年3月才被所有现代浏览器支持。
1. :focus-visible伪类的作用及背景变化
:focus-visible伪类匹配的场景是元素聚焦，同时浏览器认为聚焦轮廓应该显示。
是不是很拗口？规范就是这么定义的。:focus-visible的规范并没有强行约束匹配逻辑，而是交给了UA（也就是浏览器）
2. 在所有现代浏览器下，鼠标点击链接元素 <a> 的时候是不会出现焦点轮廓的，但是使用键盘访问的时候会出现。点击链接元素时只会触发:focus伪类，而键盘访问此链接元素时不仅会触发:focus伪类，还会触发:focus-visible伪类。

3. 这就是:focus-visible伪类的作用，可以用来区分用户的操作是鼠标点击，还是键盘访问。不过，这种判断并不完全准确，因为:focus-visible伪类匹配与否是浏览器自行决定的，没有特定的规范。目前看来，浏览器会出现默认轮廓的场景都会匹配:focus-visible伪类。

在 Chrome90 版本之前的浏览器下，有些元素的焦点轮廓就算是在点击操作下也会出现的。包括下面这些场景：
● 设置了背景的 <button> 按钮；
● HTML5 中的 <summary> 元素；
● 设置了 HTML tabindex 属性的元素。
这其实是我们不希望看到的，因为点击鼠标是目标明确的主动操作，此时出现轮廓是没有必要的，反而让操作界面变得难看了。
但是，又不能简单地通过设置 outline:none 来处理，因为这样会使使用键盘访问时应当出现的焦点轮廓被隐藏，从而带来严重的无障碍访问问题。
在这种场景下，:focus-visible伪类可谓天降神兵，只需要一条短短的CSS规则就可以兼顾视觉表现和无障碍访问：


:focus:not(:focus-visible) {

outline: 0;
}​​



此时，无论对于 <summary> 元素还是设置了 tabindex 属性的元素，在点击的时候都不会出现轮廓，同时，键盘访问时的 outline 轮廓依然保留，两全其美。
当然，由于现在的Chrome浏览器和Safari浏览器默认点击 <button> 按钮或者 <summary> 元素时都不会出现轮廓，因此，:focus-visible伪类的作用就没有以前那么明显了。准确地说是浏览器自己优化了之前的一些无障碍访问策略，使得无须使用:focus-visible伪类手动进行相关的优化了。

:focus-visible 伪类目前的作用就变成了用来区分用户行为是鼠标行为还是键盘行为。
https://memo.cosine.ren/m/336

#书摘 #css #前端
《CSS 选择器世界》7.4 非常实用的整体焦点伪类 :focus-within
整体焦点伪类 :focus-within 非常实用，且兼容性不错，目前已经可以在实际项目中使用，包括移动端项目和无须兼容IE浏览器的桌面端项目。
1. :focus-within 伪类和 :focus 伪类的区别
ChS :focus-within 伪类和 :focus 伪类有很多相似之处，那就是伪类样式的匹配离不开元素聚焦行为的触发。区别在于，:focus 伪类样式只有在当前元素处于聚焦状态的时候才匹配，而 :focus-within 伪类样式在当前元素或者当前元素的任意子元素处于聚焦状态的时候均匹配。

子元素聚焦可以使父元素的样式发生变化，这是CSS选择器世界中很了不起的革新，因为 :focus-within 伪类的行为本质上是一种父选择器行为，子元素的状态会影响父元素的样式。由于这种父选择器行为需要借助用户的行为触发，属于 “后渲染”，不会与现有的渲染机制冲突，自然也不会带来性能问题，因此浏览器在规范出现后不久就快速支持了。

2. :focus-within 伪类实现无障碍访问的下拉列表
:focus-within伪类非常实用，一方面它可以用在表单控件元素上（无论是样式自定义还是交互布局），例如输入框聚焦时高亮显示前面的描述文字，我们可以不把描述文字放在输入框的后面（具体见5.4.2节中的示例），按正常的DOM顺序即可：


<div class="cs-normal">
<label class="cs-label">用户名：</label>
<input class="cs-input">
</div>
.cs-normal:focus-within .cs-label {
color: darkblue;
text-shadow: 0 0 1px;
}​​


读者可以手动输入 https://demo.cssworld.cn/selector2/7/4-1.php 体验与学习。

另一方面，它可以用于实现完全无障碍访问的下拉列表，即使下拉列表中有其他链接或按钮也能正常访问。例如，要实现一个类似图7-10所示的下拉列表效果。
HTML结构如下：
:focus 伪类的区别
ChS :focus-within 伪类和 :focus 伪类有很多相似之处，那就是伪类样式的匹配离不开元素聚焦行为的触发。区别在于，:focus 伪类样式只有在当前元素处于聚焦状态的时候才匹配，而 :focus-within 伪类样式在当前元素或者当前元素的任意子元素处于聚焦状态的时候均匹配。

子元素聚焦可以使父元素的样式发生变化，这是CSS选择器世界中很了不起的革新，因为 :focus-within 伪类的行为本质上是一种父选择器行为，子元素的状态会影响父元素的样式。由于这种父选择器行为需要借助用户的
我们在父元素 .cs-details 上使用 :focus-within 伪类来控制下拉列表的显示和隐藏，如下：


.cs-datalist {

display: none;

position: absolute;

border: 1px solid #ddd;

background-color: #fff;

}
/* 下拉列表展开 */

.cs-details:focus-within .cs-datalist {

display: block;
}​​


本例中共有5个 <a> 元素，其中一个用于触发下拉显示的 .cs-summary 元素，另外4个在下拉列表中。无论点击这5个 <a> 元素中的哪一个，都会触发父元素 .cs-details 设置的 :focus-within 伪类样式，因此可以让下拉列表一直保持显示状态；点击页面任意空白处，下拉列表自动隐藏，效果非常理想。
读者可以手动输入 https://demo.cssworld.cn/selector2/7/4-2.php 体验与学习。

https://memo.cosine.ren/m/334

demo.cssworld.cn

:focus-within高亮输入框前面的描述文字 » CSS选择器世界demo演示

CSS选择器世界demo实例演示页面之 :focus-within高亮输入框前面的描述文字

#书摘 #css #前端
《CSS 选择器世界》7.3 聚焦行为伪类:focus与用户体验
:focus是一个从IE8浏览器开始支持的伪类，它可以匹配当前处于聚焦状态的元素。

1. 与:active伪类不同，:focus伪类默认只能匹配特定的元素，包括：
● 非disabled状态的表单元素，如 <input> 输入框、 <select> 下拉框、`<button>` 按钮等；
● 包含href属性的 <a> 元素；
● <area> 元素，不过可以生效的CSS属性有限；
● HTML5中的 <summary> 元素。

除上述特定元素之外，其他HTML元素应用:focus伪类是无效的。
如何让普通元素也能响应:focus伪类呢？设置了HTML contenteditable 属性的普通元素可以应用:focus伪类，例如：


<div contenteditable="true></div>
<div contenteditable="plaintext-only"></div>​​



因为此时 <div> 元素是一个类似 <textarea> 元素的输入框。
设置了HTML tabindex属性的普通元素也可以应用:focus伪类，例如，下面3种写法都是可以的：


<div tabindex="-1">内容</div>
<div tabindex="0">内容</div>
<div tabindex="1">内容</div>​​



如果期望 <div> 元素可以被Tab键索引，且被点击的时候可以触发:focus伪类样式，则使用tabindex="0"；如果不期望 <div> 元素可以被Tab键索引，且只在它被点击的时候触发:focus伪类样式，则使用tabindex="-1"。对于普通元素，不存在使用自然数作为tabindex属性值的场景。

2. 模拟表单元素的键盘可访问性 [type="radio"]`、 `[type="checkbox"]`、`[type="range"] 类型的`<input>`元素的UI往往不符合网站的设计风格，需要自定义样式，常规实现一般都没问题，关键是很多开发人员会忘了键盘的无障碍访问。
以 [type="checkbox"] 复选框为例，我们需要隐藏原生的`[type="checkbox"]` 复选框，使用关联的 <label> 元素自定义的复选框样式（如果不需要兼容IE和IE Edge浏览器，则无须 <label> 元素模拟）。

● 对于原生复选框元素的隐藏，要么设置透明度opacity:0，要么剪裁，千万不要使用visibility:hidden或者display:none进行隐藏，虽然IE9及以上版本的浏览器的功能是正常的，但是这两种隐藏是无法被键盘聚焦，键盘不可访问。
● 不要忘记在原生复选框聚焦的时候高亮显示自定义的输入框元素，可以是边框高亮，或者外发光，通常都使用相邻兄弟选择符(+)实现，特殊情况下也可以使用兄弟选择符(~)，如高亮多个元素时。

市面上有不少UI框架，如何区分品质？很简单，使用Tab键索引页面元素，如果输入框有高亮显示，则这个UI框架比较专业，如果什么反应都没有，建议换一种UI框架。

https://memo.cosine.ren/m/334

#优质博文 #前端 #react
RSC 就是套壳 PHP ？带你从零实现 React Server Component

via 公众号 支付宝体验科技

Weixin Official Accounts Platform

RSC 就是套壳 PHP ？带你从零实现 React Server Component

跟随 React 核心开发者 Dan Abramov 的思路，从零开始实现 React Server Component，顺带实现基于 RSC 的 SSR，附完整代码。