从特定的DIV中删除所有CSS [duplicate]

时间:2022-06-15 15:17:09

Possible Duplicate:
Disinherit (reset) the CSS style of a specific element?

可能重复:取消继承(重设)特定元素的CSS样式?

I have a page that loads an external CSS file with different CSS attributes.

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

Is it possible to create an element within that same page and specifically for that element not load any of the css?

是否有可能在同一个页面中创建一个元素,特别是该元素不加载任何css?

For example:

例如:

<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>

4 个解决方案

#1


3  

As everyone else is saying, there are usually better ways to isolate an element. However, there is a CSS selector for this purpose too.

正如其他人所说,通常有更好的方法来隔离一个元素。然而,也有为此目的的CSS选择器。

See The Negation Pseudo-Class

看到否定伪类

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; }

Example: http://jsfiddle.net/LMDLE/

例如:http://jsfiddle.net/LMDLE/

This is rarely the right solution, but it can be useful for handling edge cases which are hard to match with another selector.

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

#2


1  

This would be exactly what classes were designed for.

这正是设计类的目的。

<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>

For the record don't use names like class1 that was for demonstration only. Use descriptive names for classes that make sense.

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

#3


1  

You could positively isolate the P's you want styled:

你可以明确地将你想要的P分离出来:

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

Or you could override the ones you want to remain unstyled:

或者你可以重写那些你想要保持不风格的:

<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>

The latter is harder to maintain.

后者更难维持。

#4


0  

As I commented, What's wrong with using classes, IDs, and pseudo-selectors?

正如我所说,使用类、id和伪选择器有什么问题?

For example, this works just fine:

例如,这很好:

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

As does

一样

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

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

#1


3  

As everyone else is saying, there are usually better ways to isolate an element. However, there is a CSS selector for this purpose too.

正如其他人所说,通常有更好的方法来隔离一个元素。然而,也有为此目的的CSS选择器。

See The Negation Pseudo-Class

看到否定伪类

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; }

Example: http://jsfiddle.net/LMDLE/

例如:http://jsfiddle.net/LMDLE/

This is rarely the right solution, but it can be useful for handling edge cases which are hard to match with another selector.

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

#2


1  

This would be exactly what classes were designed for.

这正是设计类的目的。

<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>

For the record don't use names like class1 that was for demonstration only. Use descriptive names for classes that make sense.

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

#3


1  

You could positively isolate the P's you want styled:

你可以明确地将你想要的P分离出来:

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

Or you could override the ones you want to remain unstyled:

或者你可以重写那些你想要保持不风格的:

<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>

The latter is harder to maintain.

后者更难维持。

#4


0  

As I commented, What's wrong with using classes, IDs, and pseudo-selectors?

正如我所说,使用类、id和伪选择器有什么问题?

For example, this works just fine:

例如,这很好:

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

As does

一样

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

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