选择器组合实战

/* 表格包含选中行时显示批量操作 */
.data-table-container:has(tr.selected) .bulk-actions {
  display: flex;
}

/* 表格行包含错误数据时高亮 */
.data-table tbody tr:has(.error-cell) {
  background: var(--error-light);
  border-left: 4px solid var(--error);
}

/* 表格为空时显示提示 */
.data-table-container:not(:has(tbody tr)) .empty-table-message {
  display: block;
}

.data-table-container:not(:has(tbody tr)) .data-table {
  display: none;
}

/* 优势：
   1. 无需 JavaScript 管理 UI 状态
   2. 自动响应数据变化
   3. 代码简洁易维护 */

/* 表单包含未填写的必填项时禁用提交按钮 */
.complex-form:has(input[required]:placeholder-shown) .submit-button,
.complex-form:has(select[required][value=""]) .submit-button {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* 表单包含无效输入时显示警告 */
.complex-form:has(:is(input, textarea):invalid:not(:placeholder-shown)) .form-warning {
  display: flex;
}

/* 表单全部有效时显示成功提示 */
.complex-form:has(input[required]:not(:placeholder-shown):valid)
             :has(select[required]:not([value=""]))
             :not(:has(input:invalid))
             :not(:has(textarea:invalid)) .form-success {
  display: flex;
}

/* 优势：
   1. 复杂验证逻辑完全由 CSS 实现
   2. 自动响应用户输入
   3. 无需编写验证 JavaScript */

/* 根据是否有侧边栏调整主内容宽度 */
.page-container:has(.page-sidebar) .page-main {
  width: calc(100% - 270px);
}

.page-container:not(:has(.page-sidebar)) .page-main {
  width: 100%;
  max-width: 100%;
}

/* 根据内容数量调整网格列数 */
/* 只有 1-2 个项目时单列 */
.content-grid:has(.content-item:nth-child(1))
             :not(:has(.content-item:nth-child(3))) {
  grid-template-columns: 1fr;
}

/* 有 3-4 个项目时两列 */
.content-grid:has(.content-item:nth-child(3))
             :not(:has(.content-item:nth-child(5))) {
  grid-template-columns: repeat(2, 1fr);
}

/* 有 5 个或更多项目时三列 */
.content-grid:has(.content-item:nth-child(5)) {
  grid-template-columns: repeat(3, 1fr);
}

/* 优势：
   1. 布局自动响应内容变化
   2. 无需 JavaScript 或媒体查询
   3. 代码简洁直观 */

/* 当前页面的导航项高亮 */
.smart-navigation a.active {
  background: var(--primary);
  color: white;
}

/* 包含当前页面链接的父级导航项高亮 */
.smart-navigation li:has(a.active) > a:first-child:not(.active) {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-left: 4px solid var(--primary);
}

/* 导航项包含子菜单时显示箭头 */
.smart-navigation li:has(ul) > a::after {
  content: '▼';
  position: absolute;
  right: 16px;
  transition: transform 0.3s;
}

/* 展开包含激活链接的子菜单 */
.smart-navigation li:has(a.active) > ul {
  max-height: 500px;
}

/* 旋转箭头 */
.smart-navigation li:has(a.active) > a::after {
  transform: rotate(180deg);
}

/* 包含激活子项的多级导航高亮 */
.smart-navigation li:has(li:has(a.active)) > a:first-child:not(.active) {
  background: var(--info-light);
  color: var(--info-dark);
  border-left: 4px solid var(--info);
}

/* 优势：
   1. 多级导航自动管理状态
   2. 父级菜单自动感知子链接
   3. 无需手动添加类名
   4. 支持任意深度的嵌套 */