如何使用CSS选择器仅对第一个相同类名的元素应用样式

这里有一个要点：不要依赖 :first-child 选择器来更改非第一个子元素的样式。

不要相信：如果 .circle 不是 .container 的第一个子级，:first-child 将不起作用。

不要这样做：在未指定父容器的情况下，不要使用 :first-child 选择器，以避免意外选择其他父元素下的元素。

html中class的用法 css类选择器class使用指南

class属性是HTML元素的样式说明符，具有高度的可重用性。

类名清楚地描述了用途，例如主按钮。

多个类名组合；后一个定义覆盖第一个定义。

执行JavaScript的类名，例如添加点击事件。

类名区分大小写； .CoolButton 与.coolbutton 不同。

连字符连接多单词类名称，例如标题导航。

避免使用特殊字符。
数字，仅使用连字符和下划线。
基类 + 扩展类，例如
.base-button。
状态管理如
.disabled。

优先级：类选择器的优先级低于 ID 和内联样式。

性能优化以避免长时间选择。

浏览器兼容性；注意大写字母。

示例：基本按钮图案；动态互动；响应式设计。

给自己计时。

css选择器:nth-child()的用法

摘要： CSS 选择器：nth-​​child() 直接选择父成员的第 N 个子级。
使用1 选择前三个，2 n选择偶数，2 n-1 选择奇数，n+6 从第六个开始，-n+6 到第六个，n+6 :n+9 从第六个到第九个，nthlast-child(n)向后计数，nth-last-sort(n)选择不同类型。