Question

学习CSS并对我正在尝试选择的逻辑有一些问题。我正在尝试使用另外两个改变背景颜色和字体颜色的类来制作全局优惠券样式。黑色风格覆盖了白色风格的p字体，无法理解为什么。谢谢你的帮助，雅各布这是HTML / CSS

的链接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Coupons Snippet</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" type="text/css" href="css/style.css"/>

    </head>
    <body>


<div class="coupon white_c">
   <h3><span class="coupon_type_big">50%</span> Off CSS!</h3>
   <p>Present this coupon at checkout to receive half off your CSS order!</p>
   </div>


   <div class="coupon black_c">
   <h3><span class="coupon_type_big">50%</span> Off CSS!</h3>
   <p>Present this coupon at checkout to receive half off your CSS order!</p>
   </div>

    </body>
</html>


/*Coupon Style Sheet*/

 /*Global Coupon*/

.coupon {
   width: 250px;
   padding: 10px;
   text-align: center;
   border: 3px dashed #ccc; 
}

.coupon h3 {
   font: bold 200% Geneva, Arial, Helvetica, sans-serif; 
    font-size: 1.3em
}

.coupon_type_big {
    font-size: 1.8em
}

 /*Coupon White*/
.white_c {
    background-color: #f2f2f2;

}

.white_c h3,p  {
    color: #000;
}

 /*Coupon Black*/
.black_c {
    background-color: #000;

}

.black_c h3,p  {
    color: #fff;
}

Answer 1

.white_c h3,p  {
    color: #000;
}

.black_c h3,p  {
    color: #fff;
}

需要：

.white_c h3,
.white_c p  {
    color: #000;
}

.black_c h3,
.black_c p  {
    color: #fff;
}

Answer 2

CSS选择器中的逗号分隔了两个要应用相同规则的选择器，但列表中的每个选择器都是完全独立的。所以，

 .white_c h3,p  {
     color: #000;
 }

指定所有p元素（以及作为具有white_c类的元素的子元素的所有h3元素）应该具有黑色文本。同样，规则，

 .black_c h3,p  {
     color: #fff;
 }

为所有p元素提供白色文本，并且由于它稍后出现在样式表中，它会覆盖p元素的先前颜色声明。

我希望你所追求的是：

 .white_c h3, .white_c p  {
     color: #000;
 }

 .black_c h3, .black_c p  {
     color: #fff;
 }

基本的CSS选择器逻辑

2 个答案: