Html 仅为特定 Div 链接外部 CSS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26263616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Link external CSS file only for specific Div
提问by sanoj lawrence
I need to link external CSS file for specific DIV
我需要为特定的 DIV 链接外部 CSS 文件
i have 3 external CSS file
我有 3 个外部 CSS 文件
main.css
bootstrap.css
style.css
I need to link the style.cssfile to specific div <div class="leftmenu">how do i link to that div
我需要将style.css文件链接到特定的 div<div class="leftmenu">如何链接到该 div
how do i link the style.cssfile to <div class="leftmenu">
我如何将style.css文件链接到 <div class="leftmenu">
style.css
样式文件
ul
{
margin:0px;
padding:0px;
list-style-type:none;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.var_nav
{
position:relative;
background:#ccc;
width:300px;
height:70px;
margin-bottom:5px;
}
.link_bg
{
width:70px;
height:70px;
position:absolute;
background:#E01B6A;
color:#fff;
z-index:2;
}
.link_bg i
{
position:relative;
}
.link_title
{
position:absolute;
width:100%;
z-index:3;
color:#fff;
}
.link_title:hover .icon
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.var_nav:hover .link_bg
{
width:100%;
background:#E01B6A;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.var_nav:hover a
{
font-weight:bold;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.icon
{
position:relative;
width:70px;
height:70px;
text-align:center;
color:#fff;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
float:left;
transition:all .5s ease-in-out;
float:left;
}
.icon i{top:22px;position:relative;}
a{
display:block;
position:absolute;
float:left;
font-family:arial;
color:#fff;
text-decoration:none;
width:100%;
height:70px;
text-align:center;
}
span
{
margin-top:25px;
display:block;
}
i have checked the following link examplebut its little had to know can some one help me how do i link css file to a div
我已经检查了以下链接示例，但它几乎不需要知道有人可以帮助我如何将 css 文件链接到 div
<head>
<link href="../fonticon/flaticon.css" rel="stylesheet">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">
</head>
回答by
Short answer: no.
简短的回答：没有。
Other ideas:
其他想法：
Use CSS preprocessor
使用 CSS 预处理器
.leftmenu {
@include 'style.css';
}
This uses the nesting capability of CSS preprocessors to pre-qualify all the rules in style.css. Replace the @includewith your favorite preprocessor's directive for bringing in another CSS file.
这使用 CSS 预处理器的嵌套功能对style.css. 将 替换为@include您最喜欢的预处理器指令以引入另一个 CSS 文件。
Rewrite CSS manually
手动重写 CSS
You can "namespace" the rules in style.cssby changing all the selectors to be preceded by a qualifyng .leftmenu.
您可以style.css通过将所有选择器更改为以 qualng 开头来“命名空间”规则.leftmenu。
Rewrite CSS automatically
自动重写 CSS
You could write JS code to rewrite the stylesheet selectors at run-time to prefix the selectors with the class name, which his essentially what this plug-in does: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin. Or you could do this rewriting on the server, whatever language it's written in.
您可以编写 JS 代码在运行时重写样式表选择器，在选择器前面加上类名，这基本上是这个插件的作用：https: //github.com/thingsinjars/jQuery-Scoped-CSS-plugin. 或者您可以在服务器上进行重写，无论它是用什么语言编写的。
Use IFRAMEas sandbox
使用IFRAME的沙箱
If the content of the thing you want to apply the styles to can be placed in an iframe, you could add the style.cssframe to the HTML loaded in the iframe.
如果要应用样式的内容的内容可以放置在 iframe 中，则可以将style.css框架添加到 iframe 中加载的 HTML。
That's about it.
就是这样。
