揭秘15个鲜为人知的CSS技巧，前端开发者必看！

发表时间: 2023-06-26 13:11

转载说明：原创不易，未经授权，谢绝任何形式的转载

开篇

为了充分利用这篇文章，我建议你打开一个CodePen或CodeSandbox的选项卡，这样你在阅读文章的同时可以随时调试代码。

CSS（层叠样式表）是一种强大的标记语言，允许网页开发者创建视觉上令人惊叹且具有响应性的设计。在我个人的看法中，CSS（尤其是与JS结合用于响应性）可能是网页开发中最重要的部分。一旦我们达到了一定的性能门槛，普通用户对你的网站更感兴趣的是其美观度，而不是相对加载时间的比较。通过组件库（如Bootstrap、Material等），将CSS抽象出工作流程变得非常容易。一些开发者也许会选择使用以JavaScript为主的样式管理方法（即动态添加/删除类），但这会导致代码更加复杂，应用程序可能会变得更慢。今天，我们将探索一些不太为人所知的CSS属性，这样你就可以在不牺牲性能的前提下为你的应用增添细节，提升前端技能到一个新的水平。

虽然有许多广为人知的CSS属性和技术，但还有一些不太为人所知但极其有用的技巧，可以让你的网页设计更上一层楼。在这篇文章中，我们将探索10个不太为人所知的CSS技巧，帮助你提升你的网页设计水平。

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

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

使用:not()伪类可以帮助你简化CSS代码，避免手动列出要排除的元素或添加额外的类。通过使用:not()，你可以直接选择需要应用样式的元素，而无需为要排除的元素指定样式。这样可以提高代码的可维护性和灵活性。

希望这样的解释对你有帮助！如果你还有其他问题，请随时提问。

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

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

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

通过使用::before伪元素和content属性，你可以在损坏的图片位置插入自定义的内容或图标，以提醒用户图片无法加载或显示。这样可以改善用户体验，并且使页面看起来更加完整和专业。

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

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

有时候，为了保持清爽的布局，你可能希望隐藏空的元素。你可以使用:empty伪类来隐藏这些元素，而无需使用JavaScript。

通过使用:empty伪类，你可以选择并隐藏没有子元素或文本内容的空元素。这对于创建整洁的布局非常有用，特别是当你的网页内容是动态生成的时候。通过隐藏空元素，你可以改善页面的外观，并确保只显示有内容的元素，提高用户体验。

div:empty {  display: none;}

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

calc()函数允许你在CSS中执行不同单位的计算，比如百分比、像素和ems。这在创建响应式设计时特别有用。

通过使用calc()函数，你可以在CSS中进行动态计算，将不同单位的值进行相加、相减、相乘或相除。这对于创建响应式设计非常有用，因为你可以根据不同的视口尺寸或元素大小自动调整样式。例如，你可以使用calc()函数将一个元素的宽度设置为视口宽度的50%减去20像素，从而实现自适应布局。

使用calc()函数可以使你的CSS更具灵活性和可维护性，同时帮助你轻松实现动态计算的效果。

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

5、使用:hover伪类和transition属性为元素添加动画效果

你可以通过使用:hover伪类和transition属性创建简单的动画效果。这是一种轻量级的方式，可以为你的设计添加交互性，而无需依赖JavaScript或外部库。

结合使用:hover伪类和transition属性，你可以在鼠标悬停在元素上时触发样式的变化，并为这些变化添加平滑的过渡效果。通过调整transition属性的值，你可以控制过渡的速度、时间和效果类型，从而创建各种各样的动画效果。

使用:hover伪类和transition属性是一种轻量级的方法，可以为你的设计添加一些简单的交互效果，提升用户体验，而无需依赖复杂的JavaScript代码或外部库。

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

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

*选择器是一个通配符选择器，可以选中页面上的所有元素。通过使用这个选择器，你可以轻松地为你的网站应用全局样式。

使用*选择器可以方便地将样式应用于网页上的所有元素，无需逐个指定每个元素的选择器。这对于设置全局样式非常有用，例如设置默认字体、颜色或行高等。

需要注意的是，选择器会匹配页面上的每个元素，包括嵌套的元素。因此，在使用选择器时，你需要小心确保样式不会无意间影响到你不想改变的元素。

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

7、样式化第一个和最后一个子元素

你可以使用:first-child和:last-child伪类来选择和样式化父元素的第一个和最后一个子元素。这在样式化列表或导航菜单时特别有用。

使用:first-child和:last-child伪类，你可以直接选择并样式化父元素的第一个和最后一个子元素，而无需为它们添加额外的类或选择器。这对于给列表的第一个和最后一个项目添加特定样式，或者为导航菜单的第一个和最后一个链接添加特殊效果非常方便。

使用:first-child和:last-child伪类可以帮助你更精确地控制元素的样式，并且无需在HTML中添加额外的标记。

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

8、使用currentColor关键字进行一致的颜色样式设置

通过将currentColor应用于某个属性的值，你可以使该属性的值与当前元素的文本颜色保持一致。这对于实现一致的颜色样式非常有用，尤其是在涉及到父元素和子元素之间的继承关系时。

例如，你可以将currentColor应用于边框颜色、背景颜色或阴影颜色等属性，以确保它们与当前元素的文本颜色相匹配。这样可以简化样式设置，减少维护工作，并确保一致的外观。

请注意，currentColor关键字只能用于接受颜色值的属性，而不能用于所有属性。

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

9、使用:focus-within伪类为具有被聚焦子元素的元素设置样式

:focus-within伪类可以帮助你为具有被聚焦子元素的元素设置样式。当子元素获得焦点时，父元素将被匹配并应用相应的样式。这对于创建交互式表单或其他需要根据子元素聚焦状态进行样式调整的情况非常有用。

通过使用:focus-within伪类，你可以轻松地为包含聚焦子元素的父元素设置特定的样式，以提升用户体验并增强交互性。

需要注意的是，:focus-within伪类在某些旧版本的浏览器中可能不被支持，请确保你的目标浏览器支持这个伪类。

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

10、使用CSS变量轻松切换主题

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

通过使用CSS变量，你可以在整个样式表中定义和使用变量，将值存储为变量后，可以在需要的地方重用这些值。这在创建主题时特别有用，因为你可以将主题相关的颜色、字体、间距等值存储为变量，然后通过更改变量的值来轻松切换主题。

CSS变量的另一个优点是当你需要同时更改多个值时，只需更改变量的值即可，而无需逐个更改具体的样式。这提供了更方便和灵活的样式管理方式。

需要注意的是，CSS变量在一些旧版本的浏览器中可能不被完全支持，请确保你的目标浏览器支持CSS变量。

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

11、使用:checked伪类为复选框和单选框输入样式设置

由于浏览器之间的不一致性，自定义复选框和单选框输入的外观可能会具有一定的挑战性。:checked伪类允许你在这些元素被选中时进行样式设置，提供了一致且视觉上令人愉悦的用户体验。

通过使用:checked伪类，你可以为复选框和单选框输入在被选中时设置样式。这使得你可以自定义它们的外观，使其与整体的设计风格一致，并提供更好的用户反馈。你可以改变其背景色、边框样式、图标等，以突出显示选中状态。

需要注意的是，不同浏览器可能对: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 */}

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

通过使用:target伪类，你可以在元素成为当前URL片段标识符（“#”后面的部分）的目标时对其进行样式设置。这可以用于创建滚动效果或突出显示特定部分，而无需依赖JavaScript。

使用:target伪类，你可以根据URL的片段标识符来选择并样式化特定的元素。当用户点击包含片段标识符的链接时，浏览器会自动滚动到对应的元素，并应用:target伪类所定义的样式。这使得你可以在页面上创建滚动到特定部分的效果，或者突出显示被定位的元素。

通过使用:target伪类，你可以实现一些基本的滚动效果，而无需依赖JavaScript代码。这使得页面更加轻量和可维护，并提供了一种在不支持或禁用JavaScript的环境中实现滚动效果的方法。

需要注意的是，:target伪类在一些旧版本的浏览器中可能不被完全支持，请确保你的目标浏览器支持这个伪类。

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

13、使用::selection伪元素自定义文本选择样式

通过使用::selection伪元素，你可以自定义元素内选定文本的外观样式。这可以用于通过与你的网站配色方案匹配文本选择颜色，创建一个更统一的设计。

使用::selection伪元素，你可以为被选中的文本设置样式，包括文本颜色、背景颜色、边框等。通过自定义文本选择样式，你可以提升网站的整体外观，并确保选定文本与网站的配色方案相一致。

请注意，不同浏览器对::selection伪元素的支持和样式设置可能有所差异。一些浏览器可能只支持对文本颜色和背景颜色的设置，而其他样式设置可能无效。因此，在使用::selection伪元素时，请进行充分的测试，并根据需要做必要的样式调整。

通过使用::selection伪元素，你可以定制选定文本的外观，为你的网站增添个性化和一致性。

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

14、利用 :required 和 :optional 伪类为表单输入样式设置

使用 :required 和 :optional 伪类可以根据表单输入字段是否标记为必填或可选来设置样式。这对于向用户提供关于特定表单字段重要性的视觉提示非常有帮助。

通过使用 :required 和 :optional 伪类，你可以根据表单输入字段的要求状态设置相应的样式。例如，你可以改变输入框的边框颜色或标签的样式，以突出显示必填字段或区分可选字段。这样的样式设置有助于向用户传达表单字段的重要性和要求。

通过利用 :required 和 :optional 伪类，你可以为表单输入字段提供可视化的提示，帮助用户更好地理解和填写表单，并提高用户体验。

需要注意的是，:required 和 :optional 伪类在一些旧版本的浏览器中可能不被完全支持，请确保你的目标浏览器支持这些伪类。

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

15、使用::placeholder伪元素为输入框的占位文本设置样式

通过使用::placeholder伪元素，你可以为输入框内的占位文本设置样式。这可以用于创建视觉上一致且有吸引力的表单，同时为用户提供有帮助的指导。

使用::placeholder伪元素，你可以为输入框的占位文本设置样式，包括文本颜色、字体样式、对齐方式等。通过自定义占位文本的样式，你可以使表单更加吸引人，并提供有用的指导，帮助用户理解输入框的预期输入。

请注意，不同浏览器对::placeholder伪元素的支持和样式设置可能有所差异。一些浏览器可能只支持部分样式设置，而其他样式可能会被忽略。因此，在使用::placeholder伪元素时，请进行充分的测试，并根据需要做必要的样式调整。

通过使用::placeholder伪元素，你可以为输入框的占位文本设置个性化样式，提升表单的外观和用户体验。

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

结束

哎呀，这真的是太多了。考虑到有超过500个独特的属性，你会明白为什么很多开发者更喜欢JavaScript的多功能性而回避CSS。不过，和任何与代码相关的事物一样，只有不断练习才能达到完美！在你喜欢的CodePen或CodeSandbox等开发环境中测试一些这些属性，并增加对这些较为陌生的属性的熟悉度，这样你就可以在下一个项目中加入它们。如果你有一些喜欢的CSS技巧或诀窍，请在评论区分享——我自己也还在学习中！

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。