适合初学者的CSS的属性选择器完整应用案例，包含典型场景和交互实现：

一、基础属性匹配场景

1. 表单控件状态控制

form.html

<!-- HTML结构 -->
<input type="text" data-valid="true" placeholder="验证通过">
<input type="text" data-valid="false" placeholder="验证失败">

form.css

 根据验证状态显示不同边框 */
[data-valid="true"] {
  border: 2px solid #52c41a;
}
[data-valid="false"] {
  border: 2px solid #f5222d;
}

二、动态主题切换方案

1. 带图标的按钮组件

button.html

 HTML结构 -->
<button data-icon="download">下载文件</button>
<button data-icon="search">搜索</button>

button.css

 通过属性选择器添加图标 */
[data-icon] {
  padding-left: 24px;
  position: relative;
}
[data-icon="download"]::before {
  content: "↓";
  position: absolute;
  left: 8px;
}
[data-icon="search"]::before {
  content: "🔍";
  position: absolute;
  left: 8px;
}

点击按钮时通过修改data-theme属性值实现全局换肤

三、组件化开发应用

1. 带图标的按钮组件

button.html

 HTML结构 -->
<button data-icon="download">下载文件</button>
<button data-icon="search">搜索</button>

button.css

 通过属性选择器添加图标 */
[data-icon] {
  padding-left: 24px;
  position: relative;
}
[data-icon="download"]::before {
  content: "↓";
  position: absolute;
  left: 8px;
}
[data-icon="search"]::before {
  content: "🔍";
  position: absolute;
  left: 8px;
}

通过data-icon属性值自动匹配不同图标，无需额外类名

四、响应式布局方案

1. 移动端适配控制

layout.html

 HTML结构 -->
<div data-breakpoint="desktop">桌面端内容</div>
<div data-breakpoint="mobile">移动端内容</div>

layout.css

/* 默认隐藏移动端内容 */
[data-breakpoint="mobile"] {
  display: none;
}

/* 小屏幕时切换显示 */
@media (max-width: 768px) {
  [data-breakpoint="desktop"] {
    display: none;
  }
  [data-breakpoint="mobile"] {
    display: block;
  }
}

通过媒体查询和属性选择器配合实现内容切换

五、多语言支持实现

1. 国际化文本切换

lang.html

 HTML结构 -->
<div lang="en" data-i18n="welcome">Welcome</div>
<div lang="zh" data-i18n="welcome">欢迎</div>

lang.css

 默认显示英文 */
[lang="zh"] {
  display: none;
}

/* 中文环境切换 */
html[lang="zh-CN"] [lang="zh"] {
  display: block;
}
html[lang="zh-CN"] [lang="en"] {
  display: none;
}

通过修改html元素的lang属性实现语言切换