1. 包含class1但不含class2

/* 1. 使用 :not() 选择器 - 最常用和推荐的方式 */
.class1:not(.class2) {
    /* 样式代码 */
}

/* 示例 */
.card:not(.disabled) {
    background-color: white;
}

/* 2. 多个 :not() 组合使用 */
.class1:not(.class2):not(.class3) {
    /* 选择有 class1，但没有 class2 和 class3 的元素 */
}

/* 3. 组合选择器的写法 */
/* 选择父元素下，有 class1 但没有 class2 的子元素 */
.parent > .class1:not(.class2) {
    /* 样式代码 */
}

/* 4. 属性选择器结合 :not() */
[class*="btn"]:not(.disabled) {
    /* 选择类名包含 "btn" 但不包含 "disabled" 的元素 */
}

/* 选择悬停状态的激活按钮，但不包括加载和禁用状态 */
.btn:not(.loading):not(.disabled):hover {
    /* 样式 */
}

/* 选择聚焦状态的输入框，但不包括只读和禁用状态 */
.input:not([readonly]):not([disabled]):focus {
    /* 样式 */
}

2. 属性选择器以特定字符串筛选器

/* 1. 选择 class 以特定字符串开头的元素 */
[class^="vben-simple-menu__"] {
    /* 样式代码 */
}

/* 2. 选择 id 以特定字符串开头的元素 */
[id^="vben-simple-menu__"] {
    /* 样式代码 */
}

/* 实际应用示例 */
/* 所有以 vben-simple-menu__ 开头的类名 */
[class^="vben-simple-menu__"] {
    color: #333;
}

/* 组合使用 */
/* 选择以 vben-simple-menu__ 开头但不包含 disabled 的类 */
[class^="vben-simple-menu__"]:not(.disabled) {
    cursor: pointer;
}

CSS 属性选择器有以下几种匹配方式：

/* 1. ^= 以...开头 */
[class^="prefix-"] {
    /* 匹配所有以 prefix- 开头的类 */
}

/* 2. $= 以...结尾 */
[class$="-suffix"] {
    /* 匹配所有以 -suffix 结尾的类 */
}

/* 3. *= 包含... */
[class*="contains"] {
    /* 匹配所有包含 contains 的类 */
}

/* 4. ~= 包含完整单词 */
[class~="exact"] {
    /* 匹配包含完整单词 exact 的类 */
}

/* 5. |= 以...开头后面接着 - */
[class|="prefix"] {
    /* 匹配以 prefix 开头，后面紧跟 - 的类 */
}