reset multiple css styles for one single div element

前端未结

关注

 3  1337

my question is if it is possible to reset css styles (a lot off them) for a single div and all elements that are contained in that div.

I am asking, because I found

相关标签:

3条回答

不知归路

2020-12-29 09:40

As mentioned previously @Noldorin, you want a selector that selects all descendants (or children) using the universal selector.

For more info on selectors, check out W3C's documentation. CSS2 selector info is here

Example code (i've chosen to use a selector by ID as opposed to class) to illustrate:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reset</title>

<style>
.red{
    color: red;
}
.blue{
    color: blue;
}
.green{
    color: green;
}

#reset *{
    color: black;
}

#resetc > *{
    color: black;
}

</style>
</head>
<body>
<h1>With Descendant Reset Style</h1>
<div id="reset">
  <div class="red">Red</div>
  <p class="green">Green<span class="blue">Blue</span></p>
</div>

<h1>With Child Reset Style</h1>
<div id="resetc">
  <div class="red">Red</div>
  <p class="green">Green<span class="blue">Blue</span></p>
</div>

<h1>Without Reset Style</h1>
<div>
  <div class="red">Red</div>
  <p class="green">Green<span class="blue">Blue</span></p>
</div>
</body>
</html>

0 讨论(0)

南方客

2020-12-29 09:57
Try this:
```
div.foo, div.foo *
{
    // your styles
}
```
which will apply the styles to the div with class "foo" and all its descendants. The star (*) is known as the universal selector, and not surprisingly, selects elements of any type.

Or for just the immediate children:
```
div.foo, div.foo > *
{
    // your styles
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦毁少年i

2020-12-29 09:59

if practical you could put all content to be 'reset' in an iframe. The iframe contents won't inherit anything.

0 讨论(0)
发布评论:

提交评论
- 加载中...