Css3 select 一个元素使用 2 类

Question

我尝试 select 使用 2 类的元素，但由于某种原因没有成功！

我正在尝试 select 大 3，因为我想更改宽度。

总之我写的 css 代码：

.plans.large-3  {
    width: 30% !important;
}

完整代码！

 <section>
        <div class="row">
            <div class="large-12 medium-12 small-12 columns plans">
                <div class="large-12 medium-12 small-12 columns plans_title">
                    <h5>Price</h5>
                    <h2>Your Plan</h2>
                    <i class="fa fa-bar-chart" aria-hidden="true"></i>
                </div>

                <div class="large-3 medium-4 small-4 columns plans_price">
                    <h5>Test</h5>
                    <h5>5 Days</h5>
                    <h1>Free</h1
                </div>
            </div>
        </div>
    </section>

Answer 1

如果您希望 css 同时影响计划和 large-3，那么用逗号分隔 2 就可以了。

.plans .large-3 {
  width: 30% !important;
  background-color: #CCC;
}

<section>
  <div class="row">
    <div class="large-12 medium-12 small-12 columns plans">
      <div class="large-12 medium-12 small-12 columns plans_title">
        <h5>Price</h5>
        <h2>Your Plan</h2>
        <i class="fa fa-bar-chart" aria-hidden="true"></i>
      </div>

      <div class="large-3 medium-4 small-4 columns plans_price">
        <h5>Test</h5>
        <h5>5 Days</h5>
        <h1>Free</h1
      </div>
    </div>
  </div>
      <!-- ****************** not in plans class ******************** -->
       <div class="large-3 medium-4 small-4 columns plans_price">
        <h5>Test</h5>
        <h5>5 Days</h5>
        <h1>Free</h1
      </div>
     <!-- ****************** not in plans class ******************** -->
      
</section>

Answer 2

像这样：

.plans > .large-3 {
  width: 30% !important;
  border: 1px solid red;
}

<section>
  <div class="row">
    <div class="large-12 medium-12 small-12 columns plans">
      <div class="large-12 medium-12 small-12 columns plans_title">
        <h5>Price</h5>
        <h2>Your Plan</h2>
        <i class="fa fa-bar-chart" aria-hidden="true"></i>
      </div>

      <div class="large-3 medium-4 small-4 columns plans_price">
        <h5>Test</h5>
        <h5>5 Days</h5>
        <h1>Free</h1
                </div>
            </div>
        </div>
    </section>

它将 select 具有 class large-3 的元素是具有 class .plans 的元素的直接后代。有关详细信息，请参阅 MDN 上的 child selectors。

Css3 select 一个元素使用 2 类

Css3 select an element using 2 classes

css

styles

stylesheet

zurb-foundation