Style.css 没有改变

Question

我的 style.css 有问题我正在尝试创建一个白框以隐藏文本但它没有更新，任何帮助都会有所帮助。

#advantages{
	text-align: center;
}
#advantages .box {
	background: #ffffff;
	margin: 0 0 30px;
	border: solid 1px #e6e6e6;
	box-sizing: border-box;
	padding: 20px;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
}

<div class="advantages"><!-- advantages Begin -->
		<div class="container"><!-- container Begin -->
			<div class="same-height-row"><!-- same-height-row Begin -->
				<div class="col-sm-4"><!-- col-sm-4 Begin -->
					<div class="box same-height"><!-- box same-height Begin -->
						<div class="icon"><!-- icon Begin -->
							<i class="fa fa-heart"></i>
						</div><!-- icon Finished -->
						 <h3><a href="#">We Love Our Products</a></h3>
						 <p>We know to provide the best posible product ever</p>
					</div><!-- box same-height Finished -->
				</div><!-- col-sm-4 Finished -->
				<div class="col-sm-4"><!-- col-sm-4 Begin -->
					<div class="box same-height"><!-- box same-height Begin -->
						<div class="icon"><!-- icon Begin -->
							<i class="fa fa-tag"></i>
						</div><!-- icon Finished -->
						 <h3><a href="#">Best Prices</a></h3>
						 <p>Compare us with another site, who have the best prices.</p>
					</div><!-- box same-height Finished -->
				</div><!-- col-sm-4 Finished -->
				<div class="col-sm-4"><!-- col-sm-4 Begin -->
					<div class="box same-height"><!-- box same-height Begin -->
						<div class="icon"><!-- icon Begin -->
							<i class="fa fa-thumbs-up"></i>
						</div><!-- icon Finished -->
						 <h3><a href="#">100% Original Products</a></h3>
						 <p>We just offer you the best and original products.</p>
					</div><!-- box same-height Finished -->
				</div><!-- col-sm-4 Finished -->
				
			</div><!-- same-height-row Finished -->
		</div><!-- container Finished -->
	</div><!-- advantages Finished -->

我希望它们是一个白框，隐藏文本，但没有任何变化

Answer 1

Advantages 是一个类，所以我们使用 '.'类和 '#' 为 id， 所以替换

    #advantages

与

   .advantages

Answer 2

   <style>
.advantages{
	text-align: center;
}
.advantages .box {
	background: #fff;
	margin: 0 0 30px;
	border: solid 1px #e6e6e6;
	box-sizing: border-box;
	padding: 20px;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
}

</style>

<div class="advantages"><!-- advantages Begin -->
		<div class="container"><!-- container Begin -->
			<div class="same-height-row"><!-- same-height-row Begin -->
				<div class="col-sm-4"><!-- col-sm-4 Begin -->
					<div class="box same-height"><!-- box same-height Begin -->
						<div class="icon"><!-- icon Begin -->
							<i class="fa fa-heart"></i>
						</div><!-- icon Finished -->
						 <h3><a href="#">We Love Our Products</a></h3>
						 <p>We know to provide the best posible product ever</p>
					</div><!-- box same-height Finished -->
				</div><!-- col-sm-4 Finished -->
				<div class="col-sm-4"><!-- col-sm-4 Begin -->
					<div class="box same-height"><!-- box same-height Begin -->
						<div class="icon"><!-- icon Begin -->
							<i class="fa fa-tag"></i>
						</div><!-- icon Finished -->
						 <h3><a href="#">Best Prices</a></h3>
						 <p>Compare us with another site, who have the best prices.</p>
					</div><!-- box same-height Finished -->
				</div><!-- col-sm-4 Finished -->
				<div class="col-sm-4"><!-- col-sm-4 Begin -->
					<div class="box same-height"><!-- box same-height Begin -->
						<div class="icon"><!-- icon Begin -->
							<i class="fa fa-thumbs-up"></i>
						</div><!-- icon Finished -->
						 <h3><a href="#">100% Original Products</a></h3>
						 <p>We just offer you the best and original products.</p>
					</div><!-- box same-height Finished -->
				</div><!-- col-sm-4 Finished -->
				
			</div><!-- same-height-row Finished -->
		</div><!-- container Finished -->
	</div><!-- advantages Finished -->

Answer 3

尝试以下 css....

.advantages{
    text-align: center;
}
.advantages .box {
    background: #ffffff;
    margin: 0 0 30px;
    border: solid 1px #e6e6e6;
    box-sizing: border-box;
    padding: 20px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
}