CSS不能正确地影响HTML

我在一个网站上工作，很难让CSS以我期望的方式影响HTML。这是我正在处理的页面：。给我带来问题的部分是交易清单。首先，我在每个div中添加了填充，但由于某种原因，文本似乎从各自的div中扩展出来。其次，我使用了

：last child

来保持最后一个div的底部边界，但它似乎也不起作用。我一直在用Firebug来弄清楚到底发生了什么，但我真的不知道。任何帮助都将不胜感激

HTML:

---

对于删除底部部分中的额外边框，它不是由最后一个子项引起的，而是由整个部分/表格引起的

删除行或目标。清除以删除边框

<br class="clear">

---

对于删除底部部分中的额外边框，它不是由最后一个子项引起的，而是由整个部分/表格引起的

删除行或目标。清除以删除边框

<br class="clear">

---

1。用于扩展文本的修复程序

清理你的彩车

.deal:after {
   content: " ";
   clear: both;
   display: block;
}

我认为这应该行得通。应可在大多数现代浏览器上使用，请参阅以获取支持

2。删除最后一个

---

删除分配了类

.deal

的最后一个

之后的

换行符。
1。用于扩展文本的修复程序

清理你的彩车

.deal:after {
   content: " ";
   clear: both;
   display: block;
}

我认为这应该行得通。应可在大多数现代浏览器上使用，请参阅以获取支持

2。删除最后一个

删除分配了类
.deal
的最后一个
后的

换行符。
2个需要解决的问题
#1
：最后一个孩子“不工作”
div#dealsContent
中的最后一个子元素是

，而不是
div.deal
，因此选择器找不到与
节#homeDealsList div#dealsContent div.deal:last child
匹配的对应元素。您正在使用不必要的标记清除浮动。实现清除的最佳实践方法是应用所谓的
clearfix
。在这里可以找到更多关于它的信息（这篇文章来自2005年，但显然有助于你更好地理解这个主题）：


如果您对网络设计历史感兴趣，这就是它的来源（当时在前端相关主题方面最具影响力的网站，以及）：


#2
div.deal
中的内容从其容器中“溢出”
您需要了解，在计算父元素的高度时，容器中的浮动元素在任何方面都不相关。如果没有任何附加样式，只有浮动子容器的高度将始终为0。这正是
clearfix
有帮助的情况，它最初的目的是：确保容器扩展，使其完全包含其浮动子元素

因此，要同时解决这两个问题，只需删除

<br class="clear">

任务完成了！
这会在您的页面
中创建一个隐藏的伪元素：在每个
div.deal
之后，没有任何额外的、不必要的标记，并且这个伪元素为您实现clearfix“魔法”（事实上它不是）
#1
：最后一个孩子“不工作”
div#dealsContent
中的最后一个子元素是

，而不是
div.deal
，因此选择器找不到与
节#homeDealsList div#dealsContent div.deal:last child
匹配的对应元素。您正在使用不必要的标记清除浮动。实现清除的最佳实践方法是应用所谓的
clearfix
。在这里可以找到更多关于它的信息（这篇文章来自2005年，但显然有助于你更好地理解这个主题）：


如果您对网络设计历史感兴趣，这就是它的来源（当时在前端相关主题方面最具影响力的网站，以及）：


#2
div.deal
中的内容从其容器中“溢出”
您需要了解，在计算父元素的高度时，容器中的浮动元素在任何方面都不相关。如果没有任何附加样式，只有浮动子容器的高度将始终为0。这正是
clearfix
有帮助的情况，它最初的目的是：确保容器扩展，使其完全包含其浮动子元素

所以，要同时解决这两个问题，只需删除

<br class="clear">

任务完成了！
这会在您的页面中创建一个隐藏的伪元素
：在每个
div.deal
之后，没有任何额外的、不必要的标记，并且该伪元素为您执行clearfix“魔法”（实际上它不是）。
要清除浮动：

.deal:after {
    content: '';
    display: table;
    clear: both;
}

要删除底部边框，请执行以下操作：

.deal:last-child { border-bottom: none; }

要清除浮动，请执行以下操作：

.deal:after {
    content: '';
    display: table;
    clear: both;
}

要删除底部边框，请执行以下操作：

.deal:last-child { border-bottom: none; }

在您的html文件中：

<style>
section#homeDealsList div#dealsContent div.deal {
    width:100%;
    padding:30px 0;
    border-bottom:1px solid #222222;
}

section#homeDealsList div#dealsContent div.deal:last-child {
    border:none;
}

</style>


第#家庭交易列表部分#交易内容部分交易{
宽度：100%；
填充：30px0；
边框底部：1px实心#2222222；
}
第#家庭交易列表分区#交易内容分区。交易：最后一个孩子{
边界：无；
}
在html中输入：

<style>
section#homeDealsList div#dealsContent div.deal {
    width:100%;
    padding:30px 0;
    border-bottom:1px solid #222222;
}

section#homeDealsList div#dealsContent div.deal:last-child {
    border:none;
}

</style>


第#家庭交易列表部分#交易内容部分交易{
宽度：100%；
填充：30px0；
边框底部：1px实心#2222222；
}
第#家庭交易列表分区#交易内容分区。交易：最后一个孩子{
边界：无；
}
您能用完整的代码制作一个JSFIDLE吗？这有助于对其进行调整。这里的一把小提琴或一个片段也很有用。请在下面找到问题的详细解释、原因和解决方案，以及这些问题的来源。选择的答案再次表明，大多数情况下，新用户来这里只是为了获得解决方案，而不是解释。s