基本 CSS 选择器逻辑答案

【问题标题】：Basic CSS Selector Logic基本 CSS 选择器逻辑
【发布时间】：2014-08-01 16:08:37
【问题描述】：

学习 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;
}

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

基本上把.white_c里面的所有东西都变成白色，用.white_c { color: #fff; }就够了，不需要指定里面所有不同的元素。此外，当您稍后在其中添加（其他）元素时，它们也会变成白色。
确实如此，但可能不是他们想要的；我只是在更正他们的代码并使其正常工作。
是的，我明白了。只是 TS 的一些额外信息，可能对她/他有用。 :)

【解决方案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;
 }

【讨论】：