问题景象


浏览器:Chrome 87

问题起因


el-button应用的:not(xxx,xxx,xxx),以逗号分隔的选择器列表作为参数是实验性的,尚未取得广泛支持

浏览器反对状况如下:

解决办法

批改 element-plus/dist/index.css 对应的代码

原代码

<style>.el-button:not(.is-text, .is-link, .el-button--text):focus,.el-button:not(.is-text, .is-link, .el-button--text):hover {    color: var(--el-button-hover-text-color);    border-color: var(--el-button-hover-border-color);    background-color: var(--el-button-hover-bg-color);    outline: 0}.el-button:not(.is-text, .is-link, .el-button--text):active {    color: var(--el-button-active-text-color);    border-color: var(--el-button-active-border-color);    background-color: var(--el-button-active-bg-color);    outline: 0}.el-button:not(.is-text, .is-link, .el-button--text):focus-visible {    border-color: transparent;    outline: 2px solid var(--el-button-border-color);    outline-offset: 1px}<style>

对应批改为:

<style>.el-button:not(.is-text),.el-button:not(.is-link),.el-button:not(.el-button--text) {    background-color: var(--el-button-bg-color);    border: var(--el-border);    border-color: var(--el-button-border-color)}.el-button:not(.is-text):focus,.el-button:not(.is-link):focus,.el-button:not(.el-button--text):focus,.el-button:not(.is-text):hover,.el-button:not(.is-link):hover,.el-button:not(.el-button--text):hover {    color: var(--el-button-hover-text-color);    border-color: var(--el-button-hover-border-color);    background-color: var(--el-button-hover-bg-color);    outline: 0}.el-button:not(.is-text):active,.el-button:not(.is-link):active,.el-button:not(.el-button--text):active {    color: var(--el-button-active-text-color);    border-color: var(--el-button-active-border-color);    background-color: var(--el-button-active-bg-color);    outline: 0}el-button:not(.is-text):focus-visible,.el-button:not(.is-link):focus-visible,.el-button:not(.el-button--text):focus-visible {    border-color: transparent;    outline: 2px solid var(--el-button-border-color);    outline-offset: 1px}</style>