Question

我的网站使用了一些我无法修改的css网站。然后我有其他css文件，我只想申请一个特定的div。

此样式表如下所示：

@charset "UTF-8";
/* third-party plugins */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
@import "dev-plugins/mcustomscrollbar/jquery.mCustomScrollbar.css";
@import "dev-plugins/blueimp/blueimp-gallery.min.css";
@import "dev-plugins/codemirror/codemirror.css";
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}

所有网站都可以使用原始css工作正常但是如果我添加这个样式表，那么一切都会中断。有没有办法可以标记我的CSS样式表，以便它将应用于我的div及其内容？

我想用这个css影响我的div是：

<!-- page content container -->
<div class="container">

我刚试过<style type="text/css" scoped="true">，但我不喜欢这种做法，我想知道是否必须将div.container添加到css中的每个项目。

有任何线索吗？

Answer 1

如果您使用Sass，只需要一秒钟！

/* third-party plugins */ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ @import url(dev-plugins/mcustomscrollbar/jquery.mCustomScrollbar.css); @import url(dev-plugins/blueimp/blueimp-gallery.min.css); @import url(dev-plugins/codemirror/codemirror.css); div.container { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } div.container article, div.container aside, div.container details, div.container figcaption, div.container figure, div.container footer, div.container header, div.container hgroup, div.container main, div.container menu, div.container nav, div.container section, div.container summary { display: block; } div.container audio, div.container canvas, div.container progress, div.container video { display: inline-block; vertical-align: baseline; } div.container audio:not([controls]) { display: none; height: 0; } div.container [hidden], div.container template { display: none; } div.container a { background-color: transparent; } div.container a:active, div.container a:hover { outline: 0; } div.container abbr[title] { border-bottom: 1px dotted; } div.container b, div.container strong { font-weight: bold; } div.container dfn { font-style: italic; } div.container h1 { font-size: 2em; margin: 0.67em 0; } div.container mark { background: #ff0; color: #000; }

Answer 2

添加＆＃34; div.container＆＃34;对CSS中的每个项目都允许你定位＆＃34; div.container＆＃34;的每个子元素，就像这样;

HTML

<div class="container">
  <div id="header">
    <div id="hlogo">
       <a href="/">My logo</a>
    </div>
  </div>

CSS

div.container {
  // styles code
}

div.container #header {
  // styles code
}

div.container #hlogo a {
  // styles code
}

您可以使用LESS，SCSS或其他任何预处理器来避免DRY。

避免与其他样式表发生冲突

2 个答案:

HTML

CSS