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

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

(资料图)

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

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

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

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

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

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

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

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

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

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

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

div:empty {  display: none;}

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

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

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

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

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

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

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

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

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

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

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

:root {  --primary-color: #f00;}.button {  background-color: var(--primary-color);}

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

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

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

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

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

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

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

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

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

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

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