15 个鲜为人知的 CSS 技巧

为了充分利用本文，我建议打开一个 CodePen 或 CodeSandbox 选项卡，这样您就可以在阅读本文时使用代码。

CSS（层叠样式表）是一种功能强大的标记语言，允许 Web 开发人员创建视觉效果惊人且响应迅速的设计。

以我的愚见，CSS（尤其是与 JS 结合以实现响应）可能是 Web 开发中最重要的部分。 

一旦我们达到了特定的性能阈值，普通用户就会对您网站的美学更感兴趣，而不是它的相对加载时间。 CSS 也变得非常容易通过组件库（Bootstrap、Material 等）从您的工作流程中抽象出来。

一些开发人员也可能选择大量使用 javascript 的样式管理方法（即动态添加/减去类），但这会创建更复杂的代码库并可能使应用程序更慢。

今天我们将探索一些鲜为人知的 CSS 属性，这样您就可以在不牺牲性能的情况下为您的应用程序增添光彩，并将您的前端技能提升到一个新的水平。

虽然有许多广为人知的 CSS 属性和技术，但还有一些鲜为人知但非常有用的提示和技巧可以将您的网页设计提升到新的高度。 

在本文中，我们将探索 15个鲜为人知的 CSS 技巧，它们将帮助您增强网页设计的性能，并保持有趣性。

1. 使用 :not() 伪类来简化你的 CSS

:not() 伪类允许您将样式应用于所有不匹配指定选择器的元素。 这是简化 CSS 并避免手动列出元素或应用类来排除某些元素的好方法。

/* Apply styles to all elements except paragraph and anchor tags */:not(p, a) {/* Your styles here */}1.2.3.4.

2. 使用 ::before 伪元素为损坏的图像添加样式

损坏的图像会对您网站的美观产生负面影响。 为了优雅地处理它们，您可以使用 ::before 伪元素和 content 属性来显示替代消息或图标来代替损坏的图像。

img::before {content: "Image not available";display: block;text-align: center;/* Additional styles here */}1.2.3.4.5.6.

3.使用:empty伪类隐藏空元素

有时，您可能希望隐藏空元素以保持干净的布局。 您可以使用 :empty 伪类来隐藏这些元素，而不需要 JavaScript。

div:empty {display: none;
}1.2.3.

4.使用calc()进行动态计算

calc() 函数使您能够使用 CSS 中的不同单位执行计算，例如百分比、像素和 em。 这在创建响应式设计时特别有用。

.container {width: calc(100% - 20px);
}1.2.3.

5. 使用 :hover 伪类和过渡属性为元素设置动画

您可以使用 :hover 伪类结合 transition 属性创建简单的动画。 这是一种无需依赖 JavaScript 或外部库即可为您的设计添加交互性的轻量级方法。

.button {transition: background-color 0.3s ease-in-out;
}


.button:hover {background-color: #f00;
}1.2.3.4.5.6.7.8.

6.使用*选择器应用全局样式

* 选择器是一个通配符选择器，它以页面上的所有元素为目标。 通过使用此选择器，您可以轻松地将全局样式应用到您的网站。

* {box-sizing: border-box;margin: 0;padding: 0;
}1.2.3.4.5.

7. 设置第一个和最后一个子元素的样式

您可以使用 :first-child 和 :last-child 伪类来定位和设置父元素的第一个和最后一个子元素的样式。 这在设计列表或导航菜单时特别有用。

li:first-child {font-weight: bold;
}li:last-child {border: none;
}1.2.3.4.5.6.7.8.

8. 使用 currentColor 关键字来实现一致的颜色样式

.button {color: #f00;border: 1px solid currentColor;
}1.2.3.4.

9. 使用 :focus-within 伪类来设置有焦点子元素的样式

.form-group:focus-within {border: 1px solid #f00;
}1.2.3.

10.实现CSS变量，方便主题切换

CSS 变量，也称为自定义属性，允许您在整个样式表中存储和重用值。 这在创建主题或需要一次更改多个值时特别有用。

:root {--primary-color: #f00;
}


.button {background-color: var(--primary-color);
}1.2.3.4.5.6.7.8.

11. 使用 :checked 伪类样式复选框和单选输入

由于浏览器不一致，自定义复选框和无线电输入的外观可能具有挑战性。 :checked 伪类允许您在选择这些元素时设置它们的样式，从而提供一致且视觉上吸引人的用户体验。

input[type="checkbox"]:checked + label {background-color: #f00;/* Additional styles here */}input[type="radio"]:checked + label {border: 2px solid #f00;/* Additional styles here */}1.2.3.4.5.6.7.8.9.10.

12. 使用 :target 伪类在没有 JavaScript 的情况下创建滚动效果

:target 伪类允许您在元素是当前 URL 片段标识符（“#”之后的部分）的目标时设置元素样式。 这可用于创建滚动效果或突出显示特定部分，而无需依赖 JavaScript。

section:target {background-color: #f0f;/* Additional styles here */}1.2.3.4.

13、实现::selection伪元素自定义文本选择

::selection 伪元素允许您设置元素中所选文本外观的样式。 这可用于通过将文本选择颜色与您网站的配色方案相匹配来创建更具凝聚力的设计。

::selection {background-color: #f00;color: #fff;
}1.2.3.4.

14. 利用 :required 和 :optional 伪类来设置表单输入的样式

:required 和 :optional 伪类使您能够根据它们被标记为必需还是可选来设置表单输入的样式。 这有助于向用户提供有关特定表单字段重要性的视觉提示。

input:required {border: 2px solid #f00;
}input:optional {border: 1px solid #ccc;
}1.2.3.4.5.6.7.8.

15. 使用 ::placeholder 伪元素来设置输入占位符的样式

::placeholder 伪元素允许您在输入元素中设置占位符文本的样式。 这可用于创建视觉上一致且有吸引力的表单，同时为用户提供有用的指导。

input::placeholder {color: #f00;font-style: italic;
}1.2.3.4.

总结

CSS就像任何与代码相关的东西一样，需要我们熟能生巧！ 因此，我们可以在 CodePen/CodeSandbox 中测试其中一些属性，并增加对这些鲜为人知的属性的熟悉程度，以便您可以将它们添加到您的下一个应用程序中。