Question

我有一个巨大的CSS / bootstrap文件，它不仅影响元素。我希望它做到这一点，但是CSS会影响整个页面。我不能将每个元素的名称都更改为[name] .slider。那么有没有一种简单的方法可以使其仅影响容器内的元素？

<head>
<!--the stuff in here is also affected-->
</head>

<div>
<!--Stuff to get affected-->
</div>

Answer 1

当然，在目标div上放置一个ID或类，然后将该ID或类添加到CSS文件的开头。如果您使用的是Less或Sass，则可以将整个文件的内容嵌套在具有id或class的规则中。

.my-styled-section h3 {
  color: green;
}

.my-styled-section {
  color: red;
}

<head>
  <!--the stuff in here is no longer affected-->
  <h3>Test</h3>
  <p>Test</p>
</head>

<div class="my-styled-section">
  <!--Stuff to get affected-->
  <h3>Test</h3>
  <p>Test</p>
</div>

仅影响容器中的元素

1 个答案: