当我使用 :not(::placeholder-shown) 时，:NOT 似乎在 safari 浏览器中不起作用。
如果您没有使用 safari：下面我添加了一种通过 playwright 使用 safari 浏览器的方法，以便您可以自己测试。
app.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation Example</title>
<style>
input:not(:placeholder-shown):invalid {
border-color: crimson;
}
</style>
</head>
<body>
<form>
<input type="email" placeholder="" required>
<button type="submit">Submit</button>
</form>
</body>
</html>`
使用Playwright模仿Safari：
const { webkit } = require('playwright');
(async () => {
const browser = await webkit.launch({ headless: false }); // Launch Safari in non-headless mode
const context = await browser.newContext(); // Create a new browser context
const page = await context.newPage(); // Open a new page
// Set HTML content
const content = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation Example</title>
<style>
input:not(:placeholder-shown):invalid {
border-color: crimson;
}
</style>
</head>
<body>
<form>
<input type="email" placeholder="" required>
<button type="submit">Submit</button>
</form>
</body>
</html>`;
await page.setContent(content); // Load the HTML content in the page
})();
我通过使用非空占位符修复了它。我不使用 placeholder=""，而是使用 placeholder=" "