html - 从特定 DIV 中删除所有 CSS

Question

可能重复：
取消继承（重置）特定元素的 CSS 样式？

我有一个页面加载具有不同 CSS 属性的外部 CSS 文件。

是否可以在同一页面内创建一个元素，并且专门针对该元素不加载任何 CSS？

例如：

<style type="text/css">
p {
    background-color:#000000;
    width:550px;
}
</style>
<p>This should get the P styling from the style tag</p>
<p>This should NOT get the P styling</p>

Answer 1

正如其他人所说，通常有更好的方法来隔离元素。但是，也有用于此目的的 CSS 选择器。

见否定伪类

HTML

<p>A paragraph</p>
<p class="nostyle">Don't style me</p>
<p>A paragraph</p>
<p>A paragraph</p>

CSS

P:not(.nostyle) { color: red; }

示例：http: //jsfiddle.net/LMDLE/

这很少是正确的解决方案，但它对于处理难以与另一个选择器匹配的边缘情况很有用。

Answer 2

这正是类的设计目的。

<style type="text/css">
.class1{
background-color:#000000;
width:550px;
}
</style>
<p class="class1">This should get the P styling from the style tag</p>
<p>This should NOT get the P styling</p>

为了记录，不要使用 class1 之类的名称，仅用于演示。对有意义的类使用描述性名称。

Answer 3

您可以肯定地隔离您想要样式的 P：

<p class="hasStyle"></p
<p></p>

或者你可以覆盖那些你想保持无样式的：

<style>
p {
    background-color:#000000;
    width:550px;
}

.noStyle {
 background-color: none;
 width: none /* or whatever you want here */;
}
</style>

<p>has a style</p>
<p class="noStyle"></p>

后者更难维护。

Answer 4

正如我所评论的，使用类、ID 和伪选择器有什么问题？

例如，这很好用：

p:first-child {
    background-color:#000000;
    width:550px;
}

一样

.first {background-color: #000; width: 550px;}

<p class="first">Some styled text</p>
<p>Some default text</p>