css选择器类型有哪几种

说实话，CSS选择器这东西，我刚学的时候也头疼。
标签选择器比如p，我当年写第一个网页时用得最溜，结果老板说"这怎么跟打印出来的信纸一样"，我才明白得加点边距。
后来发现跟div连用，比如div p，能缩小作用范围，效率确实高不少。

id选择器header这块，我踩过坑。
有个项目id随便取，最后页面乱套，一个id对应三个不同颜色，调试了俩小时才找到。
现在坚持一个页面一个id原则，像身份证号一样唯一，效率高还不容易出错。

类选择器.button最灵活，也是我用得最多的。
记得上次重构，一个按钮要同时满足"有图"、"有点击状态"，直接加三个类button image hover，一行CSS搞定，比嵌套条件判断强多了。
不过要注意，类名别太随意，比如叫.btn，过两天想改可能整个项目都在找这个类。

伪类:hover这类，我经常用在导航上。
比如，鼠标移上去背景变深，移开恢复原样，比JavaScript动画直观多了。
伪元素:first-letter也绝了，给标题首字母加边框，设计稿里就是这么要求的。

组合使用时最考验功力。
有次做响应式布局，用@media (max-width: 7 6 8 px) .menu:hover，结果小屏幕根本没hover效果，后来发现得加display: block才行。
这类问题多是在兼容移动端时遇到的，PC端还好控制。

现在写CSS，id用得最少，主要靠类和后代选择器。
层级选择器div > p这类我偶尔用，特别深的时候会考虑BEM命名，比如section__title--highlight，虽然写起来麻烦点，但真的能降低复杂度。
组选择器h1 , h2 , h3 我基本不用，除非真的要统一设置。

伪类和伪元素这俩，我觉得是CSS的隐藏彩蛋。
:before和:after配合内容伪元素，能实现很多不用JS的布局效果，比如给列表项加背景图。
不过用多了容易失控，一个页面:nth-child、:last-child、:only-child用得多了，回头自己都看不懂。

这块我没亲自跑过，但听说CSS选择器性能排序是：id > 类 > 标签 > 伪类伪元素 > 后代 > 并集。
像id .class p:hover这种深选择器，用的时候得掂量掂量，有个项目我见过把body div section article用得像树爬一样，最后改样式改到崩溃。

数据我记得是，现代浏览器对:hover这类伪类的性能优化已经做得很好了，但极端嵌套还是建议优化，比如用属性选择器[type="button"]代替input[type="button"]能更快匹配。
不过具体数字得查最新版Can I Use，这块我没持续跟踪。

在HTML结构中，如何通过CSS选择第一个具有特定类名的子元素？

:nth-child(1 of.item) 精准定位第一个 .item 子元素。

.main > .item:nth-child(1 of.item) 语法直接。

父级 .main，子级 .item，of 后跟 .item。

传统选择器 :first-child、:first-of-type 不行。

Chrome8 8 +、Firefox7 8 + 支持。

旧浏览器用 JS 或调整结构。

JS 示例：document.querySelectorAll('.main > .item')[0]?.classList.add('first-item');
推荐现代方案，简洁高效。