我需要链接特定DIV的外部CSS文件
我有3个外部CSS文件
main.css
bootstrap.css
style.css
我需要将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 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;
}
我已经检查了以下链接example，但它很少知道可以帮助我如何将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>
答案 0 :(得分：12)
简答：不。
其他想法：
.leftmenu {
@include 'style.css';
}
这使用CSS预处理器的嵌套功能来预先验证style.css中的所有规则。将@include替换为您最喜欢的预处理程序指令，以引入另一个CSS文件。
您可以通过将所有选择器更改为符合条件的style.css来“命名”.leftmenu中的规则。
你可以编写JS代码来在运行时重写样式表选择器，为选择器添加类名称，这基本上就是这个插件的作用：https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin。或者你可以在服务器上进行这种重写，无论它是用什么语言写的。
IFRAME作为沙箱如果您要应用样式的内容可以放在iframe中，则可以将style.css框架添加到iframe中加载的HTML中。
就是这样。