CSS 冷门知识大全

CSS 冷门知识大全

CSS 作为前端开发的基石，除了常见的样式设置外，还有很多鲜为人知但非常实用的冷门知识。以下是一些你可能不知道的 CSS 技巧和特性：

1. 超越 !important 的样式优先级

当同时设置 max-width 和 width 并都使用 !important 时，max-width 会优先生效。同理，min-width 的优先级高于 max-width。

div {
  width: 1000px !important;
  max-width: 500px !important; /* 实际生效的是这个 */
}

2. 幽灵空白节点

在 HTML5 文档声明中，内联元素前面会有一个看不见的"幽灵空白节点"，它会影响布局却不占据实际宽度。

<div><span></span></div>
<style>
div { background: #ccc; }
span { display: inline-block; }
</style>

3. 方向属性 direction 的妙用

direction: rtl 不仅可以改变文本方向，还能反转内联元素的排列顺序，比如快速调换对话框中"确定"和"取消"按钮的位置。

.dialog-buttons {
  direction: rtl; /* 按钮顺序会反转 */
}

4. 图片加载失败时的优雅降级

当图片加载失败时，可以通过 CSS 显示 alt 文本并添加美观的提示：

img:not([src]) {
  visibility: hidden;
}
img::after {
  content: attr(alt);
  /* 添加样式美化alt文本显示 */
}

5. 高级文本效果

• 文字描边：使用 -webkit-text-stroke 为文字添加描边
• 多行文本截断：使用 -webkit-line-clamp 实现多行文本省略

.text-outline {
  -webkit-text-stroke: 1px #04D939;
}

.text-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

6. 不常见的布局技巧

• 固定表头：使用 position: sticky 实现滚动表格固定表头
• 多列布局：使用 column-count 创建多列文本
• 纵横比盒子：使用 aspect-ratio 创建固定比例的容器

.table thead tr {
  position: sticky;
  top: 0;
}

.multi-column {
  column-count: 2;
}

.square-box {
  aspect-ratio: 1/1;
}

7. 伪类与伪元素的冷门用法

• :where() 简化选择器列表
• :placeholder-shown 样式化空输入框
• ::first-letter 实现首字下沉效果

.parent :where(div, .title, #article) {
  color: red;
}

input:placeholder-shown {
  border-color: #04D939;
}

p::first-letter {
  font-size: 200%;
  float: left;
}

8. 不常见的交互效果

• 禁用文本选择：user-select: none 防止用户选中文本
• 点击穿透：pointer-events: none 使元素不响应鼠标事件
• 触摸操作控制：touch-action 控制触摸行为

.no-select {
  user-select: none;
}

.click-through {
  pointer-events: none;
}

.no-touch-scroll {
  touch-action: none;
}

9. 不常用的单位与函数

• 视口单位：vw、vh、vmin、vmax
• 计算函数：calc() 实现动态计算
• CSS变量：使用 var(--name) 引用自定义属性

.container {
  width: calc(100% - 20px);
  height: 50vh;
  padding: var(--spacing);
}

10. 不常见的样式技巧

• 模拟虚线边框：用背景渐变实现美观的虚线
• 移除数字输入框箭头：自定义数字输入框样式
• 自定义滚动条：美化浏览器滚动条

.dashed-border {
  background-image: linear-gradient(to right, #ccc 50%, transparent 50%);
  background-size: 8px 1px;
}

input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

::-webkit-scrollbar {
  width: 12px;
  background: #f0f0f0;
}

这些 CSS 冷门知识虽然不常用，但在特定场景下能解决棘手问题或实现特殊效果。掌握它们可以让你在开发中更加游刃有余。