如何重置或删除特定元素的 CSS 样式
主题：HTML / CSS上一页|下一页
答案：使用 CSS all 属性
您可以简单地使用带有 revert 值的 CSS all 属性来删除元素的其他作者定义的 CSS 样式（即重置为浏览器的默认 CSS 样式）。
所有主流的现代浏览器都支持 CSS all 属性，例如 Chrome、Firefox、Safari、Edge 等。让我们尝试以下示例来了解它的实际工作原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reset/Remove CSS Styles for Element</title>
<style>
/* Some custom styling */
body {
color: red;
font-size: 18px;
}
.container {
padding: 20px;
border: 1px solid black;
}
h1 {
color: white;
background: black;
}
p {
font-style: italic;
}
/* 恢复目标元素及其子元素的 CSS 样式 */
.reset-style, .reset-style * {
all: revert;
}
</style>
</head>
<body>
<div class="container reset-style">
<h1>这是一个标题</h1>
<p>This is a simple paragraph of text.</p>
</div>
</body>
</html>在上面的示例中，只有在作者定义的样式表中为容器及其子元素定义的样式规则（即自定义样式）将被忽略，但是它仍然可以从其父元素（例如 <body> 元素）继承诸如 color, font-size 等属性 在我们的例子中。 要恢复页面上所有元素的样式，只需将 .reset-style 类直接应用于 <body> 元素。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements