html - 仅应用 CSS 的第一个元素？

Question

我这样创建价格表:

请点击我的代码下方的完整页面以方便查看。

@import url('http://fonts.googleapis.com/css?family=Indie+Flower');
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,700');

body{
    background-color: rgb(237, 237, 237);
}

#pricing{
    width: 1340px;
/*     margin: 100px auto; */
    font-family: 'Open Sans', Helvetica;
}

.price_card{
    width: 295px;
    max-height: 173px;
    background: rgb(255, 255, 255);
    display: inline-table;
    top: 0;
    border: 1px solid green;
}
.price_card:not(:last-child){
    margin-right: 32px;
}
.header{
    color: rgb(255, 255, 255);
    background-color: rgb(113, 191, 68);
    font-size: 20px;
    font-weight: 100;
    height: 68px;
    display: block;
    text-align: center;
    padding: 28px 0 0px;
}
.price{
    width: 100%;
    font-size: 18px;
    font-weight: 300;
    display: block;
    text-align: center;
    padding: 10px 0 10px;
}
.name{
    width: 100%;
    font-size: 25px;
    font-weight: 100;
    display: block;
    text-align: center;
    padding: 0;
}
.features{
    list-style: none;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(144, 205, 109);
    margin: 0;
    padding: 0;
}
.features li{
    margin: 0 35px;
    padding: 20px 15px;
    width: 200px;
}
.features li:not(:last-child){
    border: 1px solid rgb(242, 242, 242);
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
button{
    color: rgb(255, 255, 255);
    border: 0;
    border-radius: 0px;
    height: 42px;
    width: 177px;
    display: block;
    font-weight: 200;
    background-color: rgb(113, 191, 68);
    font-size: 18px;
    text-transform: uppercase;
    margin: 20px auto 35px;
}

<div id="pricing">
  <div class="content">
    <h1>PRICE POPULAR CLOUD SERVICES</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptates magnam nam eligendi, maiores quis, <br />ut perspiciatis odit eos accusamus modi sequi laborum veritatis quasi harum dolorem maxime, magni at!
    </p>
    <br />
  </div>
  <div class="price_card">
    <div class="header">
      <span class="name">Google Cloud</span>
    </div>
    <ul class="features">
      <span class="price">800 USD</span>
    </ul>
    <button>More info</button>
  </div>
  <div class="price_card">
    <div class="header">
      <span class="name">Amazon Cloud</span>
    </div>
    <ul class="features">
      <li class="price">1000 USD</li>
    </ul>
    <button>More info</button>
  </div>
  <div class="price_card">
    <div class="header">
      <span class="name">GO DADDY</span>
    </div>
    <ul class="features">
      <li class="price">1200 USD</li>
    </ul>
    <button>More info</button>
  </div>
  <div class="price_card">
    <div class="header">
      <span class="name">PLUS+ </span>
    </div>
    <ul class="features">
      <li class="price">2000 USD</li>
    </ul>
    <button>More info</button>
  </div>
</div>

我有两个问题:

你可以看到:

1. 类的第一个元素:price_card 应用样式 CSS。另一个什么都不是。

为什么会遇到这个问题？

1. 我没有使用响应式网站的经验。你能以大约 800x400 像素的分辨率为例吗？它只自动缩放第一行的两张卡片和第二行的两张卡片？

Answer 1

您在其中一个 block 中使用了不同的 HTML 元素。

改变:

<div class="price_card">
<div class="header">
  <span class="name">Google Cloud</span>
</div>
<ul class="features">
  <span class="price">800 USD</span>
</ul>
<button>More info</button>

收件人:

<div class="price_card">
<div class="header">
  <span class="name">Google Cloud</span>
</div>
<ul class="features">
  <li class="price">800 USD</li>
</ul>
<button>More info</button>

您的无序列表将“span”作为第一个子元素，但应该将“li”作为第一个子元素。