HTML within a div takes parent HTML's CSS_问答_开发者

HTML within a div takes parent HTML's CSS

开发者 https://www.devze.com 2023-01-17 10:27 出处：网络

I have an HTML as following: <html> <head> <style type=\"text/css\"> a {color: red} </style>

相关专题：css

I have an HTML as following:

<html>
    <head>
        <style type="text/css">
            a {color: red}
        </style>
    </head>
    <body>
        <div>
            <html>
                <body>
                    <a href="#">Test Link</a>
                </body>
            </html>
        </div>
    </body>
</html>

"Test Link" is displayed in green color. By this I understand that the HTML inside div takes parent HTML's CSS. In my scenario, I do not have c开发者_JAVA百科ontrol over the parent HTML. I can only control div's contents. Is there a way to have a clean, fresh CSS for the HTML inside div? I dont want the parent HTML's CSS to be applied to the HTML inside div. Any help appreciated.

Thanks

Your HTML is disgusting, use an iframe instead.

page1.html

<html>
    <head>
        <style type="text/css">
            a {color: red}
        </style>
    </head>
    <body>
        <div>
            <iframe src="page2.html"></iframe>
        </div>
    </body>
</html>

page2.html

<html>
    <body>
        <a href="#">Test Link</a>
    </body>
</html>

Unrelated, I'm so sorry, but you're colourblind.

You aren't allowed to use the HTML tag like that. It doesn't restart CSS properties.

If you don't want all a tags to be green, don't use CSS to say you do!

Man, you code is terrible and invalid :) To have a clean, fresh CSS for the HTML inside div you may use iframe.

Use a localised reset.

Grab a CSS reset, e.g. Eric Meyer's Reset Reloaded and change it to apply to your div.

So, in front of every element, put your div's id or something there. Feel free to trim the huge list of selectors to what you use. If this div is being included into other people's pages, you may want to faux namespace it (and children with id or class) like my-element-container. This will ensure no naming clashes. You can use CSS namespacing when it is widely supported (a while off still...)

Then you can play with CSS inside.

Also, validate your HTML. Look at the errors, and fix them. Don't rely on your browser's error handling of markup, as it just makes things a pain to debug.

You could use the > child selector.

body>a {
  color: red;
}

This will only style links that are direct children of the body. Bear in mind, IE doesn't support this.

And may I suggest use proper syntax

<html>
    <head>
        <style type="text/css">
            body>a {color: red}
        </style>
    </head>
    <body>
        <div>
           <a href="#">Test Link</a>
        </div>
    </body>
</html>