问题描述:

Is it possible to have a separate CSS file for a div in a document. This DIV should not inherit any properties from other CSS files which included in the page. I will try to make it more clear with the following lines. I am expecting something like this.

<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">

<head>

<link rel = "stylesheet" type = "text/css" href = "main_style.css" />

</head>

<body>

<div class="main">

<div rel = "stylesheet" href = "sub_style.css"> <!-- This with seperate stylesheet.-->

<!--

Elements here will have style only from sub_style.css and not from main_style.css

-->

</div>

</div>

</body>

</html>

Edit: If it is not possible with DIV, can we achieve it using iframe ?

网友答案:

The short answer is NO, if you want to prevent the div to inherit styles from other stylesheet, the only way to do is to override the styles either by using more specific selectors or using !important, I would prefer specific selectors here.

For example, you've something like the below snippet in stylesheet 1

div {
   color: #f00;
   font-weight: bold;
}

and you've below in stylesheet 2

div {
   font-weight: normal;
}

In this case, the font will be normal for div as it is overridden, but the color will be #f00, inorder to have some another color, you need to specify the color in your stylesheet 2 too...


If you want to target a div specifically, I would suggest you to use an id which will be unique, and than write the respective styles for that particular div

For example

<div id="unique_element"></div>

div#unique_element {
   /* Define styles here, or override the previous */
}

This way, using an id your specificity will increase to a greater extent, also you can target the particular div


As you edited your question, if you want to use an iframe than yes, you can use <style> blocks inside a that document and style that div

网友答案:

You cannot link a CSS file to a div. But by using the id(#) or Class(.) with proper selectors you can create a independent style for that div element.

相关阅读:
Top