仅为特定Div链接外部CSS文件 [英] Link external CSS file only for specific Div
问题描述
我需要链接特定DIV的外部CSS文件
我有3个外部CSS文件
main.css
bootstrap.css
style.css
$ b b
我需要将 style.css 文件链接到特定的div < div class =leftmenu>
如何链接到该div
如何链接 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 easy-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;
}
我已经检查了以下链接示例但它的小必须知道可以有人帮助我如何链接css文件到div
< head>
< link href =../ fonticon / flaticon.css =stylesheet>
< link href =../ css / bootstrap.min.css =stylesheet>
< link href =style.css =stylesheet>
< link href =../ css / main.css =stylesheet>
< / head>
简答：不。
正确答案，未在任何浏览器中实施：将外部css的范围限制为仅限特定元素？
其他答案：
使用CSS预处理器
.leftmenu {
@include'style.css' ;
}
这使用CSS预处理器的嵌套功能预先限定所有规则 style.css 。将 @include 替换为您喜欢的预处理器的指令，以引入另一个CSS文件。注意：如果导入的CSS包含媒体查询，我怀疑这可能会中断。
手动重写CSS
通过更改所有选择器前面的qualifyng .leftmenu 。 style.css / p>
自动重写CSS
您可以编写JS代码以在运行时重写样式表选择器，与类名称，这本质上这个插件做什么： https：// github。 com / thingsinjars / jQuery-Scoped-CSS-plugin 。
使用 IFRAME 作为沙盒 h3>
如果要应用样式的内容可以放在iframe中，则可以添加 style.css 框架到在iframe中加载的HTML。
就是这样。
I need to link external CSS file for specific DIV
i have 3 external CSS file
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
how do i link the style.css file to <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 example but its little had to know can some one help me how do i link css file to a 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>
Short answer: no.
Correct answer, not implemented in any browsers: Limit scope of external css to only a specific element?.
Other answers:
Use CSS preprocessor
.leftmenu {
@include 'style.css';
}
This uses the nesting capability of CSS preprocessors to pre-qualify all the rules in style.css. Replace the @include with your favorite preprocessor's directive for bringing in another CSS file. Note: I suspect this may break if the imported CSS contains media queries.
Rewrite CSS manually
You can "namespace" the rules in style.css by changing all the selectors to be preceded by a qualifyng .leftmenu.
Rewrite CSS automatically
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.
Use IFRAME as sandbox
If the content of the thing you want to apply the styles to can be placed in an iframe, you could add the style.css frame to the HTML loaded in the iframe.
That's about it.
这篇关于仅为特定Div链接外部CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
