我希望早点学会的 CSS 选择器

我早期的 CSS 看起来像 class 名称的狂热梦境。\\x60header-nav-item-active\\x60。\\x60sidebar-link-wrapper-inner\\x60。我为每个样式变体都创建一个新 class，因为我根本不知道还有更好的办法。当我最终发现了正确的 CSS 选择器时，我在一个下午删除了大约百分之四十的样式表。

第一个改变我生活的选择器是子组合器——不起眼的 \\x60>\\x60 符号。在我了解它之前，如果我想只样式化一个容器的直接子元素，我要么创建一个特定 class，要么不小心样式化了所有嵌套的内容。子组合器让我只针对直接子元素，孙元素不受影响。听起来很小，但它一夜之间就消除了几十个不必要的 class。

然后是 \\x60:nth-child()\\x60。我数不清有多少次我写了特定的 class 比如 \\x60row-1\\x60、\\x60row-2\\x60、\\x60row-3\\x60 只是为了在表格上交替背景颜色。\\x60:nth-child(even)\\x60 和 \\x60:nth-child(odd)\\x60 本可以为我节省数小时。一旦你开始使用像 \\x60:nth-child(3n+1)\\x60 这样的公式，你会发现你可以定位每隔三个的元素、或前四个、或任何你能想到的模式，而不需要改动你的标记。

\\x60:not()\\x60 伪类是另一个启示。我曾经写一长串选择器来排除一个特定元素。现在我只写类似 \\x60div:not(.excluded)\\x60 然后继续。这干净太多了，而且它让我以不同的方式思考 CSS 逻辑——更多关于我想排除什么，而不是我想包含什么。

属性选择器是我最后偶然发现的隐藏宝石。\\x60[type="text"]\\x60 让我定位所有文本输入框而不需要 class。\\x60[href^="https"]\\x60 只定位安全链接。\\x60[href$=".pdf"]\\x60 定位下载链接。这些对于表单样式和链接样式非常强大，而且它们不需要任何额外的标记。

相邻兄弟组合器——\\x60+\\x60 符号——在间距方面成了我最好的朋友。需要在除了第一个之外的每个列表项之间加一个外边距？\\x60li + li { margin-top: 10px; }\\x60 一行搞定。不需要 first-child 覆盖。不需要在第一个元素上加特殊的 class。

\\x60:empty\\x60 选择器听起来小众，直到你意识到框架有多经常在你的标记中留下空的 div。\\x60:empty { display: none; }\\x60 瞬间清理了我的布局。

回顾所有这些，我意识到我一直把 CSS 当作一个显式标记系统，而它其实是一个模式匹配系统。选择器是描述模式的语言。一旦我学会了用关系和位置而不是名称来描述我想要的东西，一切都通了。

如果你还在写 \\x60item-1\\x60、\\x60item-2\\x60、\\x60item-3\\x60 这样的 class 名，停下来。打开一个 CSS 选择器参考，花一小时学习组合器和伪类。这可能是你这一周最高效的一小时。