了解 CSS“section.positioned”选择器 [关闭]答案

【问题标题】：Understanding CSS "section.positioned" Selector [closed]了解 CSS“section.positioned”选择器 [关闭]
【发布时间】：2017-04-25 05:30:15
【问题描述】：

谁能解释我在网页中找到的以下 css 代码以及section.positioned 影响哪些元素？

section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 500px;
  box-shadow: 0 0 15px #333;
}

部分网页代码

<section class="">
  <div class="container">
    ......
  </div>
</section>

【问题讨论】：

如果我错了，请纠正我，但您的问题是否源于this fiddle？如果是这样，我创建了一个更新版本here，它应该会让事情变得更清晰。

标签： html css

【解决方案1】：

section.positioned 规则针对这样的元素：

<section class="positioned">

</section>

通过将现有 html 部分元素的类从空更改为“定位”，section.positioned 规则将应用于元素，而不是 section 规则。

添加：

section.positioned 的真正含义是它以“section”类型的元素为目标，该元素有一个名为“positioned”的类。

进一步阅读 CSS 选择器：

【讨论】：