Question

所以我了解到，在CSS中，id选择器优先于类选择器，但是由于某种原因，将id添加到我想要的段落中，并且更改其位置不会对其产生任何影响，一些建议。

it('innerHTML length before results found is 504', () =>
nightmare
 .goto(url)
 .type('input#movieInput', 'Batman')
 .click('button#myBtn')
 .evaluate(() => document.querySelectorAll('body')[0].innerHTML.length)
 .then((length) => {
  expect(length).to.equal(504);
 })
);

.stats {
  text-align: left;
  position: absolute;
  font-family: guy;
  font-size: 20px;
  bottom: 0;
}

#queue {
  text-align: right;
}

Answer 1

position:absolute是元凶，因为它将使宽度缩小以适合宽度，因此没有内容可以对齐，因为内容将定义宽度

添加边框以更好地查看问题：

.stats {
  text-align: left;
  position: absolute;
  font-family: guy;
  font-size: 20px;
  bottom: 0;
  border:1px solid;
}

#queue {
  text-align: right;
}

<div class="stats">
  <p>Online Users: 100</p>
  <p id="queue">Players in Queue: 1</p>
</div>

您需要使用width:100%来制作元素left:0; right:0;

.stats {
  text-align: left;
  position: absolute;
  font-family: guy;
  font-size: 20px;
  bottom: 0;
  border:1px solid;
  left:0;
  right:0;
}

#queue {
  text-align: right;
}

<div class="stats">
  <p>Online Users: 100</p>
  <p id="queue">Players in Queue: 1</p>
</div>

Answer 2

这是由于父级position: absolute;导致宽度缩小到内容（即文本）宽度（因此text-align无效）。如果将其删除，则会看到预期的结果。（您可能希望使用margin-top而不是绝对位置来与顶部保持一定距离）

.stats {
  text-align: left;
  font-family: guy;
  font-size: 20px;
  bottom: 0;
}

#queue {
  text-align: right;
}

<div class="stats">
  <p>Online Users: 100</p>
  <p id="queue">Players in Queue: 1</p>
</div>

Answer 3

您的位置绝对值会使div元素脱离常规文档流。如果为.stat类指定宽度，则它应按预期响应：

.stats {
  width: 100%;
  text-align: left;
  position: absolute;
  font-family: guy;
  font-size: 20px;
  bottom: 0;
}

#queue {
  text-align: right;
}

<div class="stats">
  <p>Online Users: 100</p>
  <p id="queue">Players in Queue: 1</p>
</div>

Answer 4

您学到的东西很好，但是看不到结果的原因是您需要为div提供最小宽度。

将此添加到div.state： .stats {min-width: 100%;}

希望有帮助。

CSS，为什么我的ID不比班级优先？

4 个答案: