我可以将整个样式表只应用于一个 div 吗？

Can I apply an entire style sheet to just one div?

提问人：Leena A 提问时间：10/9/2023 最后编辑：Mark SchultheissLeena A 更新时间：10/14/2023 访问量：107

问：

我想在我正在构建的网站中使用动态引导日历。我的网站有一个样式表，但日历有自己的样式，无论我做什么，一个工作表中的某件事都会破坏其他元素（我的标题被日历样式表破坏了，并且由于我的样式表，日历变得不稳定和不对称。

我尝试将一个类放在一个类（下面）中，并将该类交给一个 div 并将日历代码放入其中，但它不起作用。

.calendar_content{
sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent; }
  a:hover {
    color: #0056b3;
    text-decoration: underline; }

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none; }
  a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
    color: inherit;
    text-decoration: none; }
  a:not([href]):not([tabindex]):focus {
    outline: 0; }

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em; }

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto; }
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<div class="calendar_content"> Calendar code </div>

我也尝试使用id（如下），但它也不起作用。

CSS: #calendar_content{the entire stylesheet content}
HTML: <div id="calendar_content"> Calendar code </div>

附加信息：涉及js文件，但我不认为它会影响网站的视图。

javascript html ， css， twitter-bootstrap

评论

1赞 CBroe 10/9/2023
“我试着把一个类放在一个类中”——这不是原生 CSS 目前支持的语法;您需要使用 LESS 或 SASS 等预处理器语言才能正常工作。
0赞 Kaddath 10/9/2023
你能在问题中添加一个“整个样式表内容”中的规则的例子吗？此外，您尝试在包装器 div 中设置样式的所有元素是否都如此？如果没有，这将更难
0赞 Leena A 10/9/2023
@Kaddath完成。不，有些类定义了填充/边距、其他列表等。
1赞 Heretic Monkey 10/9/2023
@CBroe CSS 嵌套现在已成为一种标准。当然，它没有得到广泛支持，但它是一种标准。
0赞 Mark Schultheiss 10/10/2023
除了在充满挑战的情况下，使用样式中的元素名称设置一些“重置”，例如，，和，你似乎有很多这样的挑战。为什么使用没有 href 的锚标记？a {div {pre, code, kbd, samp {a:not([href])

答：

1赞 Mahmoud Hassan 10/9/2023 #1

如果您使用的是 React/NextJS，则只需将 Calendar 组件中的 CSS 文件导入为模块即可

import cssFileName.module.css

如果您使用的是原生 HTML/CSS ，则需要使用 sass/scss/less 才能使用类嵌套 EX 等语法：

.class1{
   .class2{
      color: white;
    }
}

评论

0赞 Kaddath 10/9/2023
为什么说 OP 很可能没有使用的工具需要解决问题，而存在一个明显的解决方案：重构样式以依赖于包装器类，例如 or ？.class1.class2 { ... }.class1 .class2 { ... }
0赞 Leena A 10/9/2023
您能详细介绍第一点吗？所以我可以进一步探索/研究它。我正在使用原生 html/css，是的，但它取决于浏览器中的 sass 编译器，它与项目需求不匹配。
2赞 A Haworth 10/9/2023
请注意，类嵌套在主要浏览器上存在，但有限制。caniuse.com/?search=nested%20
0赞 Mark Schultheiss 10/10/2023 #2

虽然你可以通过为每个CSS规则添加前缀来支持不支持嵌套CSS的情况，或者避免SCSS或SASS等，但这可能会变得丑陋。

.calendar_content sub {
  bottom: -.25em;
}

.calendar_content sup {
  top: -.5em;
}

.calendar_content a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

.calendar_content a:hover {
  color: #0056b3;
  text-decoration: underline;
}

.calendar_content a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

.calendar_content a:not([href]):not([tabindex]):hover,
.calendar_content a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

.calendar_content a:not([href]):not([tabindex]):focus {
  outline: 0;
}

.calendar_content pre,
.calendar_content code,
.calendar_content kbd,
.calendar_content samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

.calendar_content pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<div class="calendar_content"> Calendar code </div>

评论

0赞 Leena A 10/14/2023
是的，这就是我所担心的。我将尝试读取嵌套的 CSS，但如果所有失败看起来我都必须这样做，不幸的是。谢谢！
0赞 Flash Thunder 10/14/2023 #3

事实上，CSS中有嵌套，但你仍然需要添加到每个嵌套规则中，就像这样：&

.calendar_content {
   color:red;
   & a{
    color: green;
   }
}
<div class="calendar_content"> no link <a href="#">link</a></div>

我想自动执行此操作的唯一方法是使用 JavaScript 重写日历和所有其他元素的规则。

上一个：有没有办法在 nuxt 3 中使用 bootstrapVue 2 组件？

下一个：如何将对象的项放入数组中？[关闭]