我需要为特定的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;
}
我已经检查了以下链接示例,但它的一点必须知道可以有人帮助我如何将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>
小智 13
简答:不.
其他想法:
.leftmenu {
@include 'style.css';
}
这使用CSS预处理器的嵌套功能来预先限定所有规则style.css.@include用您喜欢的预处理器指令替换以引入另一个CSS文件.
您可以style.css通过更改要在qualifyng之前的所有选择器来"命名"规则.leftmenu.
你可以编写JS代码来在运行时重写样式表选择器,为选择器添加类名称,这基本上就是这个插件的作用:https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin.或者你可以在服务器上进行这种重写,无论它是用什么语言编写的.
IFRAME的沙箱如果您要应用样式的内容可以放在iframe中,则可以将style.css框架添加到iframe中加载的HTML中.
就是这样.
| 归档时间： |
|
| 查看次数： |
21375 次 |
| 最近记录： |