我的按钮的背景颜色不适用于所有按钮[重复]

Question

最后一部分“Cardio + Core”显示背景颜色为黑色，但其余部分则不是。我尝试分别做它们，但也没有任何效果。我假设这是我在某处犯的一个简单错误，特别是如果它适用于“Cardio + Core”按钮。最后我还给每个按钮一个数字，例如：“btn1”、“btn2”等。有没有更简洁的方法来做到这一点？特别是因为我在页面上有更多按钮。

.heading {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    color: #008000;
}

.heading h2 {
    font-weight: 600;
    font-size: 30px;
    color: #008000;
}

.content {
    display: flex;
    justify-content: space-between;
}

.contentBx {
    padding-right: 30px;
}

.contentBx h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.w50 {
    min-width: 50%;
}

img {
    max-width: 100%;
}

.programs {
    background: black;
}

.heading {
    color: white;
}

.programs .content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.programs .content .programsBx {
    padding: 40px 20px;
    background: white;
    color: #008000;
    max-width: 340px;
    margin: 20px;
    text-align: center;
    transition: .5s;
}

.programs .content .programsBx:hover {
    background: #008000;
    color: black;
}

.programs .content .programsBx h2 {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
}


.btn1, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7 {
    position: relative;
    background: black;
    display: inline-block;
    color: #ffffff;
    margin-top: 20px;
    padding: 10px 30px;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 20px;
}

.btn1, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7:hover {
    background: white;
    color: #008000;
}

<section class="programs">
        <div class="heading">
            <h2>Programs</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, vitae?</p>
        </div>
        <div class="content">
            <div class="programsBx">
                <img src="images/workout (2).png" alt="">
                <h2>Online Training</h2>
                <p>Training sessions with --- facilitated online give you the consistent workouts you want, from the comfort and safety of your own home.</p>
                <a href="#" class="btn1">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/gymnast.png" alt="">
                <h2>Leg and Glute Toning</h2>
                <p>Muscle tone gives you the strength to back up what you are trying to achieve.

                    There is a big difference between looking slim and looking toned. ---- will design a plan for you to get more toned, and fully explain the workouts that will help you achieve a noticeable change in the next 12 weeks.</p>
                <a href="#" class="btn2">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/diet.png" alt="">
                <h2>Diet & Transformation</h2>
                <p>Achieve that slim body you always wanted with a 12-week personalized diet plan.

                   --- will tell you exactly what foods to eat and avoid, creating a personalized diet for you based on your specific physical and life conditions. Dexter will fully explain how to execute your meal plan, with quantities and times to eat.</p>
                <a href="#" class="btn3">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/sports-and-competition.png" alt="">
                <h2>Abs Transformation</h2>
                <p>15 day abs transformation: toning and sculpting mid-section & lower back.

                    This is not for beginners or people with excessive fat at their stomachs. Designed for the person who has been working hard at their abs and needs the last bit of definition they have been craving for: the lines and the super flat lower tummy, without the love handles.</p>
                <a href="#" class="btn4">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/goal.png" alt="">
                <h2>Achieve Your Dream</h2>
                <p>4 months to make your dream into YOUR achievement with personalized training from ---.

                    Begin the journey to achieve your dream today and find out just how great you can become. Get one-on-one support from --- to learn the mindset, training, nutrition, discipline and daily habits it takes as you progressively achieve your goal over the next 4 months.</p>
                <a href="#" class="btn5">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/food.png" alt="">
                <h2>Diet Plan Only</h2>
                <p>Perfect your physique in a specific time limit with a day diet plan from Richardo.

                    You’re already fit with an exercise routine that’s working, but your diet needs improvement. A custom daily mean plan for your body will be made, to perfect performance and aesthetics.</p>
                <a href="#" class="btn6">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/workout (1).png" alt="">
                <h2>Cardio + Core</h2>
                <p>Cardio and core training requires a pattern that truly challenges your body.

                    --- will provide you with a personalized AM/PM cardio and core training plan, fully explaining what you will do every day to execute. Get the right pattern of exercises from Dexter so you see and feel results in 12 weeks.</p>
                <a href="#" class="btn7">Enroll Here</a>
            </div>
        </div>
    </section>

Answer 1

如果您不向每个按钮添加任何特定样式，您可以简单地为所有按钮使用 .btn 类。

或者如果你想添加特定的样式然后为每个按钮添加一些类名。

使用.btn 类为所有按钮添加通用样式。

使用.btn1 类为特定按钮添加样式。

如果你想为每个按钮添加不同的样式 .btn1,.btn2,btn3... 像这样你可以为所有按钮添加一个类名

.heading {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    color: #008000;
}

.heading h2 {
    font-weight: 600;
    font-size: 30px;
    color: #008000;
}

.content {
    display: flex;
    justify-content: space-between;
}

.contentBx {
    padding-right: 30px;
}

.contentBx h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.w50 {
    min-width: 50%;
}

img {
    max-width: 100%;
}

.programs {
    background: black;
}

.heading {
    color: white;
}

.programs .content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.programs .content .programsBx {
    padding: 40px 20px;
    background: white;
    color: #008000;
    max-width: 340px;
    margin: 20px;
    text-align: center;
    transition: .5s;
}

.programs .content .programsBx:hover {
    background: #008000;
    color: black;
}

.programs .content .programsBx h2 {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
}


.btn {
    position: relative;
    background: black;
    display: inline-block;
    color: #ffffff;
    margin-top: 20px;
    padding: 10px 30px;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 20px;
}
.btn1{
  background-color:blue;
}
.btn:hover {
    background: white;
    color: #008000;
}

<section class="programs">
        <div class="heading">
            <h2>Programs</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, vitae?</p>
        </div>
        <div class="content">
            <div class="programsBx">
                <img src="images/workout (2).png" alt="">
                <h2>Online Training</h2>
                <p>Training sessions with --- facilitated online give you the consistent workouts you want, from the comfort and safety of your own home.</p>
                <a href="#" class="btn btn1">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/gymnast.png" alt="">
                <h2>Leg and Glute Toning</h2>
                <p>Muscle tone gives you the strength to back up what you are trying to achieve.

                    There is a big difference between looking slim and looking toned. ---- will design a plan for you to get more toned, and fully explain the workouts that will help you achieve a noticeable change in the next 12 weeks.</p>
                <a href="#" class="btn btn2">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/diet.png" alt="">
                <h2>Diet & Transformation</h2>
                <p>Achieve that slim body you always wanted with a 12-week personalized diet plan.

                   --- will tell you exactly what foods to eat and avoid, creating a personalized diet for you based on your specific physical and life conditions. Dexter will fully explain how to execute your meal plan, with quantities and times to eat.</p>
                <a href="#" class="btn btn3">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/sports-and-competition.png" alt="">
                <h2>Abs Transformation</h2>
                <p>15 day abs transformation: toning and sculpting mid-section & lower back.

                    This is not for beginners or people with excessive fat at their stomachs. Designed for the person who has been working hard at their abs and needs the last bit of definition they have been craving for: the lines and the super flat lower tummy, without the love handles.</p>
                <a href="#" class="btn btn4">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/goal.png" alt="">
                <h2>Achieve Your Dream</h2>
                <p>4 months to make your dream into YOUR achievement with personalized training from ---.

                    Begin the journey to achieve your dream today and find out just how great you can become. Get one-on-one support from --- to learn the mindset, training, nutrition, discipline and daily habits it takes as you progressively achieve your goal over the next 4 months.</p>
                <a href="#" class="btn btn5">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/food.png" alt="">
                <h2>Diet Plan Only</h2>
                <p>Perfect your physique in a specific time limit with a day diet plan from Richardo.

                    You’re already fit with an exercise routine that’s working, but your diet needs improvement. A custom daily mean plan for your body will be made, to perfect performance and aesthetics.</p>
                <a href="#" class="btn btn6">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/workout (1).png" alt="">
                <h2>Cardio + Core</h2>
                <p>Cardio and core training requires a pattern that truly challenges your body.

                    --- will provide you with a personalized AM/PM cardio and core training plan, fully explaining what you will do every day to execute. Get the right pattern of exercises from Dexter so you see and feel results in 12 weeks.</p>
                <a href="#" class="btn btn7">Enroll Here</a>
            </div>
        </div>
    </section>

Answer 2

您可以将单个 .btn 类用于按钮并使用其父类管理其悬停状态。

body {
  margin:0;
  padding:0;
  font-family: sans-serif;
}
.heading {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    color: #008000;
}

.heading h2 {
    font-weight: 600;
    font-size: 30px;
    color: #008000;
    margin:0;
    padding: 10px 0;
}

.content {
    display: flex;
    justify-content: space-between;
}

.contentBx {
    padding-right: 30px;
}

.contentBx h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.w50 {
    min-width: 50%;
}

img {
    max-width: 100%;
}

.programs {
    background: black;
}

.heading {
    color: white;
}

.programs .content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.programs .content .programsBx {
    padding: 40px 20px;
    background: white;
    color: #008000;
    max-width: 340px;
    margin: 20px;
    text-align: center;
    transition: .5s;
}

.programs .content .programsBx:hover {
    background: #008000;
    color: black;
}

.programs .content .programsBx h2 {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
}


.programsBx .btn {
    position: relative;
    background-color: black;
    display: inline-block;
    color: #ffffff;
    margin-top: 20px;
    padding: 10px 30px;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 20px;
}

.programsBx:hover .btn {
    background: white;
    color: #008000;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <section class="programs">
      <div class="heading">
        <h2>Programs</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. At, vitae?
        </p>
      </div>
      <div class="content">
        <div class="programsBx">
          <img src="images/workout (2).png" alt="" />
          <h2>Online Training</h2>
          <p>
            Training sessions with --- facilitated online give you the
            consistent workouts you want, from the comfort and safety of your
            own home.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
        <div class="programsBx">
          <img src="images/gymnast.png" alt="" />
          <h2>Leg and Glute Toning</h2>
          <p>
            Muscle tone gives you the strength to back up what you are trying to
            achieve. There is a big difference between looking slim and looking
            toned. ---- will design a plan for you to get more toned, and fully
            explain the workouts that will help you achieve a noticeable change
            in the next 12 weeks.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
        <div class="programsBx">
          <img src="images/diet.png" alt="" />
          <h2>Diet & Transformation</h2>
          <p>
            Achieve that slim body you always wanted with a 12-week personalized
            diet plan. --- will tell you exactly what foods to eat and avoid,
            creating a personalized diet for you based on your specific physical
            and life conditions. Dexter will fully explain how to execute your
            meal plan, with quantities and times to eat.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
        <div class="programsBx">
          <img src="images/sports-and-competition.png" alt="" />
          <h2>Abs Transformation</h2>
          <p>
            15 day abs transformation: toning and sculpting mid-section & lower
            back. This is not for beginners or people with excessive fat at
            their stomachs. Designed for the person who has been working hard at
            their abs and needs the last bit of definition they have been
            craving for: the lines and the super flat lower tummy, without the
            love handles.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
        <div class="programsBx">
          <img src="images/goal.png" alt="" />
          <h2>Achieve Your Dream</h2>
          <p>
            4 months to make your dream into YOUR achievement with personalized
            training from ---. Begin the journey to achieve your dream today and
            find out just how great you can become. Get one-on-one support from
            --- to learn the mindset, training, nutrition, discipline and daily
            habits it takes as you progressively achieve your goal over the next
            4 months.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
        <div class="programsBx">
          <img src="images/food.png" alt="" />
          <h2>Diet Plan Only</h2>
          <p>
            Perfect your physique in a specific time limit with a day diet plan
            from Richardo. You’re already fit with an exercise routine that’s
            working, but your diet needs improvement. A custom daily mean plan
            for your body will be made, to perfect performance and aesthetics.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
        <div class="programsBx">
          <img src="images/workout (1).png" alt="" />
          <h2>Cardio + Core</h2>
          <p>
            Cardio and core training requires a pattern that truly challenges
            your body. --- will provide you with a personalized AM/PM cardio and
            core training plan, fully explaining what you will do every day to
            execute. Get the right pattern of exercises from Dexter so you see
            and feel results in 12 weeks.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
      </div>
    </section>
  </body>
</html>

Answer 3

您的 CSS 在 :hover 选择器上搞砸了。使用这个：

.btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover, .btn5:hover, .btn6:hover, .btn7:hover {
    background: white;
    color: #008000;
}