css - 从 CSS 中的两个不同选择器中选择的元素。第一个有效，但第二个无效

Question

我想制作一个包含三列的定价表。如:

* Basic Package *        * BEST VALUE *         * Legendary 7 *
   Awesomeness              Awesome+               Awesome++
    24/7 Chat             Chat + Email           24/7 1-(800) #
      etc.                    etc.                   etc.

显然，“最佳值(value)”列将通过某种颜色或特殊装饰突出显示或聚焦。但是，我希望我的样式表适应不同数量的列。

这是我的 HTML:

<div class="colx3 pricingPlan">
  <div class="plan">Basic</div>
  <div class="spotlight">Basic</div>
  <div class="plan">Basic</div>
</div>

此 CSS 不起作用:

.pricingPlan>div {
  background:#999;
  display:inline-block;
  margin:0 auto;
}

.colx3>.plan, .colx3>.spotlight {
  width:33%;
}

这个 CSS 确实有效:

.pricingPlan>div {
  background:#999;
  display:inline-block;
  margin:0 auto;
  width:33%;
}

.colx3>.plan, .colx3>.spotlight {
  /// EMPTY /////////
}

我不想将两个选择器组合在一组属性下，但我认为它应该按照我的方式工作。如何以两种不同的方式定义元素的样式？更重要的是，如何根据总列数(在类名 colx3 中定义)调整列的大小。

Answer 1

您要做的是制作 <div> 的列s 漂浮在一排。所以后一个 CSS 确实有效，因为在其中 <div> s 由属性 display:inline-block; 定义将它们并排对齐，宽度为 33%。如果您使用以前的 CSS(您提到的那个不起作用)并添加 float: left;在选择器中定义的宽度( width:33%; )之后 .colx3>.plan, .colx3>.spotlight它会起作用。

Here是一个 fiddle

为了根据一行中的列数调整列的大小，您可以使用 JavaScript(此处未提供)或纯 CSS 方法，通过使用 display: table; 设置父元素。和带有 display: table-cell; 的子列也可能有效。

还有 .clearfix被定义为万一列不分崩离析 <div> s 被添加到文档中(只是一种故障安全技术)。