跳至主要內容

其他函数

Kpsmart2025年3月4日大约 4 分钟

其他函数

CSS 提供了多种实用函数，用于引用资源、访问变量、处理属性值等，这些函数增强了 CSS 的灵活性和可维护性。

函数列表

下面是其他常用 CSS 函数的完整列表，点击函数名可跳转到 MDN 文档查看详细信息。

函数名描述语法
var()引用 CSS 自定义属性（变量）var(--变量名, 备用值)
attr()获取元素的 HTML 属性值attr(属性名 类型)
url()引用外部资源url(资源路径)
env()访问环境变量env(变量名, 备用值)
counter()访问计数器的当前值counter(计数器名, 计数器样式)
counters()访问嵌套计数器的值counters(计数器名, 分隔符, 计数器样式)
toggle()在多个值之间切换toggle(值1, 值2, ...)
symbols()定义计数器符号symbols(类型, 符号1, 符号2, ...)
target-counter()获取目标元素的计数器值target-counter(url, 计数器名, 计数器样式)
target-text()获取目标元素的文本内容target-text(url, 内容类型)
leader()创建前导符（如目录中的点线）leader(模式)
content()引用元素的内容content(文本)

使用示例

CSS 变量与 var() 函数

/* 定义变量 */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-base: 16px;
  --spacing-unit: 8px;
}

/* 使用变量 */
.button {
  background-color: var(--primary-color);
  color: white;
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
  font-size: var(--font-size-base);
  border-radius: calc(var(--spacing-unit) / 2);
}

/* 使用备用值 */
.fallback-example {
  color: var(--undefined-color, #333);
}

/* 变量嵌套 */
.nested-vars {
  --base-padding: 10px;
  --extra-padding: var(--base-padding, 5px);
  padding: var(--extra-padding);
}

attr() 函数

/* 基本用法 - 显示链接的 href 属性 */
a::after {
  content: " (" attr(href) ")";
}

/* 显示自定义数据属性 */
[data-tooltip]::before {
  content: attr(data-tooltip);
  display: none;
}

[data-tooltip]:hover::before {
  display: block;
  position: absolute;
  background: #333;
  color: white;
  padding: 5px;
  border-radius: 3px;
}

/* 使用 attr() 设置其他属性 */
.dynamic-width {
  width: attr(data-width px, 100px);
}

env() 函数

/* 安全区域 - 适用于全面屏设备 */
.safe-area-padding {
  padding-top: env(safe-area-inset-top, 20px);
  padding-right: env(safe-area-inset-right, 20px);
  padding-bottom: env(safe-area-inset-bottom, 20px);
  padding-left: env(safe-area-inset-left, 20px);
}

/* 结合 CSS 变量使用 */
:root {
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
}

.fixed-bottom {
  position: fixed;
  bottom: var(--safe-bottom);
  left: 0;
  right: 0;
}

counter() 和 counters() 函数

/* 基本计数器 */
body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

/* 嵌套计数器 */
body {
  counter-reset: chapter;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h1::before {
  content: "Chapter " counter(chapter) ". ";
}

h2 {
  counter-increment: section;
}

h2::before {
  content: counter(chapter) "." counter(section) " ";
}

/* 使用 counters() 函数 */
ol {
  counter-reset: item;
  list-style-type: none;
}

li {
  counter-increment: item;
}

li::before {
  content: counters(item, ".") " ";
}

url() 函数

/* 背景图像 */
.background-image {
  background-image: url('images/pattern.png');
}

/* 多个背景 */
.multiple-backgrounds {
  background-image: 
    url('images/top.png'),
    url('images/middle.png'),
    url('images/bottom.png');
  background-position: 
    top center,
    center,
    bottom center;
  background-repeat: no-repeat;
}

/* 引用字体 */
@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/custom-font.woff2') format('woff2'),
       url('fonts/custom-font.woff') format('woff');
}

/* 引用其他资源 */
.cursor-custom {
  cursor: url('cursors/custom.cur'), auto;
}

高级应用

主题切换

/* 定义主题变量 */
:root {
  /* 亮色主题（默认） */
  --bg-color: #ffffff;
  --text-color: #333333;
  --accent-color: #3498db;
}

/* 暗色主题 */
[data-theme="dark"] {
  --bg-color: #222222;
  --text-color: #f5f5f5;
  --accent-color: #5dade2;
}

/* 使用主题变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

a {
  color: var(--accent-color);
}

响应式设计

:root {
  --container-width: 1200px;
  --gutter: 20px;
  --columns: 12;
  
  /* 响应式断点 */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

.container {
  max-width: var(--container-width);
  padding: 0 var(--gutter);
  margin: 0 auto;
}

/* 使用媒体查询和变量 */
@media (max-width: 768px) {
  :root {
    --gutter: 15px;
  }
  
  .container {
    padding: 0 var(--gutter);
  }
}

动态内容生成

/* 使用 attr() 和 counter() 创建目录 */
.toc {
  counter-reset: toc-item;
}

.toc-item {
  counter-increment: toc-item;
}

.toc-item::before {
  content: counter(toc-item) ". ";
}

.toc-item::after {
  content: leader(".") " " target-counter(attr(href url), page);
  float: right;
}

浏览器兼容性

函数ChromeFirefoxSafariEdge
var()49+31+9.1+15+
attr() (基本)1+1+1+12+
attr() (类型化)不支持不支持不支持不支持
url()1+1+1+12+
env()69+65+11.2+79+
counter()/counters()2+1+3+12+
toggle()不支持不支持不支持不支持
symbols()91+33+不支持91+
target-counter()不支持不支持不支持不支持
target-text()不支持不支持不支持不支持
leader()不支持不支持不支持不支持
content()不支持不支持不支持不支持

最佳实践

  1. CSS 变量命名：使用有意义的名称，采用 --组件-属性-状态 的命名模式。
  2. 变量组织：将全局变量定义在 :root 选择器中，组件特定变量定义在组件选择器中。
  3. 提供备用值：始终为 var() 函数提供备用值，以防变量未定义。
  4. 性能考虑：过度使用 CSS 变量可能影响性能，特别是在复杂的计算中。
  5. 兼容性：为不支持这些函数的浏览器提供回退方案。
  6. 作用域：利用 CSS 的级联特性创建变量的作用域。

相关资源