如何不从父母继承CSS样式？

Question

我想在SELECT re.topic, COUNT(*) AS TimesUsed FROM ost_ticket AS us JOIN ost_help_topic AS re ON re.topic_id = us.topic_id WHERE re.created >= CURDATE() - INTERVAL 7 DAY -- Here! AND re.created <= CURDATE() -- And here GROUP BY us.topic_id ORDER BY TimesUsed DESC LIMIT 1 中包含一个大的<div>，如下所示，但它不应该是父母的CSS样式所固有的。

<div class="jumbotron">

Here是正确呈现的大html块，当它被包含在Bootstrap模板中时here，其中字体大小和更多都搞砸了。

问题

是否有可能将html chunk包含在父类的任何CSS样式中？

Answer 1

使用或阻止CSS继承的一些方法：

1. 最明显的方法是删除jumbotron css并编写自己的。

2. 其次，您可以尝试将CS​​S更改为更具体。例如，使用高级css选择器IE：.jumbotron > .childClass。或者像+ :not() :first-child :last-child（和其他）这样的内容。取决于您的用例。请参阅advanced selectors。

或者，如果您不想修改或更改父类的CSS。然后另一种选择是用更高的父级覆盖它。例如......

<div class="jumboTronParent">
  <div class="container">
    <div class="jumbotron">
      <div class="myChildClass"></div>
    </div>
  </div>
</div>

.jumboTronParent .jumbotron > .myChildClass {
  font-size:1em;
  // applies font style to just first level children with this class
}

.jumboTronParent .jumbotron .myChildClass {
  font-size:1em;
  // applies font style to all children with class
}