适用于某些孩子但忽略其他孩子的 CSS 规则答案

【问题标题】：CSS rule that applies to some children but ignores others适用于某些孩子但忽略其他孩子的 CSS 规则
【发布时间】：2018-01-27 05:06:14
【问题描述】：

我有这个基本设置：

  <ul class='collection'>
    <li class='collection-item'><strong>Name:</strong> Tim</li>
    <li class='collection-item'><strong>Current Location:</strong> Kansas</li>
  </ul>

我想要一个将非粗体文本向右浮动的规则。目前我已经尝试过：

li > :not(strong){
  float: right;}

但它不影响强文本。如果我将非粗体文本包装在 <p> 元素中并执行

li > p {
  float: right;}

它添加了一个额外的行，我想避免。我是否错误地使用了:not 选择器？还有另一种方法可以做到这一点吗？谢谢

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用 flexbox，因此它可以将纯文本转换为匿名 flex 项。

.collection-item {
  display: flex;
  justify-content: space-between;
}

<ul class='collection'>
  <li class='collection-item'><strong>Name:</strong> Tim</li>
  <li class='collection-item'><strong>Current Location:</strong> Kansas</li>
</ul>

您还可以尝试文本对齐和浮动技巧。

.collection-item {
  text-align: right;
}

.collection-item strong {
  float: left;
}

<ul class='collection'>
  <li class='collection-item'><strong>Name:</strong> Tim</li>
  <li class='collection-item'><strong>Current Location:</strong> Kansas</li>
</ul>

【讨论】：