参见英文答案 >
Limit scope of external css to only a specific element?4个
我需要为特定的DIV链接外部CSS文件
我需要为特定的DIV链接外部CSS文件
我有3个外部CSS文件
main.css bootstrap.css style.css
我需要将style.cssfile链接到特定的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>
解决方法
简答：不.
其他想法：
使用CSS预处理器
.leftmenu {
@include 'style.css';
}
这使用CSS预处理器的嵌套功能来预先限定style.css中的所有规则.将@include替换为您最喜欢的预处理器指令,以引入另一个CSS文件.
手动重写CSS
您可以通过更改要在qualifyng .leftmenu之前的所有选择器来“命名”style.css中的规则.
自动重写CSS
你可以编写JS代码来在运行时重写样式表选择器,为选择器添加类名称前缀,这基本上就是这个插件的作用：https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin.或者你可以在服务器上进行这种重写,无论它是用什么语言写的. .
使用IFRAME作为沙箱
如果要将样式应用于的事物的内容可以放在iframe中,则可以将style.css框架添加到iframe中加载的HTML中.
就是这样.
