只應用CSS第一個元素？

Question

我建立這樣的價格：

請點擊到full page在bellow我的代碼看起來很容易。

@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

您在其中一個塊中使用了不同的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> 

你的無序列表有一個 「跨度」 的第一個子元素，但是應該有一個「李「作爲第一個子元素。