重置或删除特定元素的样式

创建于 2024-12-03 / 26
字体： [默认] [大] [更大]

主题: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>重置或删除特定元素的 CSS 样式</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>这是一个简单的文本段落。</p>
    </div>
</body>
</html>

在上面的示例中，只有在作者定义的样式表中为容器及其子元素定义的样式规则（即自定义样式）将被忽略，但是它仍然可以从其父元素（例如 <body> 元素）继承诸如 color, font-size 等属性 在我们的例子中。 要恢复页面上所有元素的样式，只需将 .reset-style 类直接应用于 <body> 元素。

FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答:


0 人点赞过