Flexbox 正在重置/覆盖/更改我定义的所有 CSS 字体规则。我不知道为什么？

Question

我刚开始学习 CSS flexbox。所以我试图创建一个需要并排对齐三个 div 的弹出模式，我能够使用 flexbox 实现它。但我遇到了一个问题：

Flexbox CSS 规则覆盖或更改了我的字体系列 CSS 规则。删除它们后，我能够看到所有文本和段落变回定义的字体系列，但在包含它们时，它会以某种方式自动更改字体。

这就是字体的样子（没有 flex）。但是在运行下给出的代码中，您会注意到即使在使用 !important（包括 flex）之后，它也会忽略字体的所有 CSS 规则。

请查看我在CSS中的评论以找到要删除的部分。

请运行下面的代码。

$(document).ready(function() {
  $("#myModal").modal('show');
});

/* CSS For Flex & Structure */


/* PLEASE REMOVE THIS PART to see the real change in fonts. */


/* START REMOVING FROM HERE */

.wrap_modalrow {
  display: flex;
  flex-wrap: wrap;
}

.wrap_modalcat {
  flex: 1 1 100px;
  padding: 10px;
}

.wrap_modal {
  height: auto;
}


/* CSS rules for Body Structure */

.tyg-modal {
  text-align: center !important;
}

.modal-dialog {
  border: 6px solid #FFEEF4 !important;
}

.modal-content {
  border: none !important;
  background-color: #FFFFFF !important;
}


/* STOP REMOVING */


/* Text & Font Styling rules */

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@100;300;400&display=swap');
.modal-title {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 68px;
  margin: 0px !important;
  font-weight: 250 !important;
}

.p-thin {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 300 !important;
  font-size: 17px !important;
  color: #999999 !important;
  letter-spacing: 0.1em;
}

.p-bold {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 400 !important;
  letter-spacing: 0.2em;
  font-size: 19px !important;
}

.p-bold2 {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 400 !important;
  letter-spacing: 0.1em;
  font-size: 19px !important;
}

.p-thinner {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
}

.p-bolder {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: bold !important;
  letter-spacing: 0.1em;
  font-size: 19px !important;
  margin-bottom: 6px !important;
  padding: 7px;
  background: #FFEEF4;
  border: none;
}

.p-bolder:hover {
  border: 2px solid;
}

<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="tyg-modal">
  <div id="myModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title"></h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <div class="modal-body">
          <h5 class="modal-title">WELCOME</h5>
          <p class="p-thin">IT'S NICE TO SEE YOU!</p>
          <p class="p-bold">WHAT WOULD YOU LIKE TO BROWSE?</p>

          <div class="wrap_modal">
            <div class="wrap_modalrow">

              <div class="wrap_modalcat">
                <img src="https://i.ibb.co/YbJv4RP/violet-purple-pink-logo-circle-png-favpng-QN3u0-WAnf-Sk-SUERjz-Ti-ERz-FGP-removebg-preview.png" alt="Girl in a jacket" width="130" height="130" />
                <h5 class="p-bold2">Category 1</h5>
                <p class="p-thinner">BUY XYZ</p>
              </div>

              <div class="wrap_modalcat">
                <img src="https://i.ibb.co/YbJv4RP/violet-purple-pink-logo-circle-png-favpng-QN3u0-WAnf-Sk-SUERjz-Ti-ERz-FGP-removebg-preview.png" alt="Girl in a jacket" width="130" height="130" />
                <h5 class="p-bold2">Category 2</h5>
                <p class="p-thinner">SELL XYZ</p>
              </div>

              <div class="wrap_modalcat">
                <img src="https://i.ibb.co/YbJv4RP/violet-purple-pink-logo-circle-png-favpng-QN3u0-WAnf-Sk-SUERjz-Ti-ERz-FGP-removebg-preview.png" alt="Girl in a jacket" width="130" height="130" />
                <h5 class="p-bold2">Category 3</h5>
                <p class="p-thinner">BUY ABC</p>
              </div>

            </div>
          </div>

          <button type="submit" class="close p-bolder" data-dismiss="modal">TAKE ME HOME</button><br/>
        </div>
      </div>
    </div>
  </div>
</div>

</html>

如果有人可以指导我解决我的错误以及如何改进它，那将非常有帮助。

Answer 1

在您的 HTML

中包含 Google CSS 导入

    <link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC:wght@100;300;400&display=swap' rel='stylesheet' />

$(document).ready(function() {
  $("#myModal").modal('show');
});

/* CSS For Flex & Structure */


/* PLEASE REMOVE THIS PART to see the real change in fonts. */


/* START REMOVING FROM HERE */

.wrap_modalrow {
  display: flex;
  flex-wrap: wrap;
}

.wrap_modalcat {
  flex: 1 1 100px;
  padding: 10px;
}

.wrap_modal {
  height: auto;
}


/* CSS rules for Body Structure */

.tyg-modal {
  text-align: center !important;
}

.modal-dialog {
  border: 6px solid #FFEEF4 !important;
}

.modal-content {
  border: none !important;
  background-color: #FFFFFF !important;
}


/* STOP REMOVING */


/* Text & Font Styling rules */

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@100;300;400&display=swap');
.modal-title {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 68px;
  margin: 0px !important;
  font-weight: 250 !important;
}

.p-thin {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 300 !important;
  font-size: 17px !important;
  color: #999999 !important;
  letter-spacing: 0.1em;
}

.p-bold {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 400 !important;
  letter-spacing: 0.2em;
  font-size: 19px !important;
}

.p-bold2 {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 400 !important;
  letter-spacing: 0.1em;
  font-size: 19px !important;
}

.p-thinner {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
}

.p-bolder {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: bold !important;
  letter-spacing: 0.1em;
  font-size: 19px !important;
  margin-bottom: 6px !important;
  padding: 7px;
  background: #FFEEF4;
  border: none;
}

.p-bolder:hover {
  border: 2px solid;
}

<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC:wght@100;300;400&display=swap' rel='stylesheet' />
<div class="tyg-modal">
  <div id="myModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title"></h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <div class="modal-body">
          <h5 class="modal-title">WELCOME</h5>
          <p class="p-thin">IT'S NICE TO SEE YOU!</p>
          <p class="p-bold">WHAT WOULD YOU LIKE TO BROWSE?</p>

          <div class="wrap_modal">
            <div class="wrap_modalrow">

              <div class="wrap_modalcat">
                <img src="https://i.ibb.co/YbJv4RP/violet-purple-pink-logo-circle-png-favpng-QN3u0-WAnf-Sk-SUERjz-Ti-ERz-FGP-removebg-preview.png" alt="Girl in a jacket" width="130" height="130" />
                <h5 class="p-bold2">Category 1</h5>
                <p class="p-thinner">BUY XYZ</p>
              </div>

              <div class="wrap_modalcat">
                <img src="https://i.ibb.co/YbJv4RP/violet-purple-pink-logo-circle-png-favpng-QN3u0-WAnf-Sk-SUERjz-Ti-ERz-FGP-removebg-preview.png" alt="Girl in a jacket" width="130" height="130" />
                <h5 class="p-bold2">Category 2</h5>
                <p class="p-thinner">SELL XYZ</p>
              </div>

              <div class="wrap_modalcat">
                <img src="https://i.ibb.co/YbJv4RP/violet-purple-pink-logo-circle-png-favpng-QN3u0-WAnf-Sk-SUERjz-Ti-ERz-FGP-removebg-preview.png" alt="Girl in a jacket" width="130" height="130" />
                <h5 class="p-bold2">Category 3</h5>
                <p class="p-thinner">BUY ABC</p>
              </div>

            </div>
          </div>

          <button type="submit" class="close p-bolder" data-dismiss="modal">TAKE ME HOME</button><br/>
        </div>
      </div>
    </div>
  </div>
</div>

</html>

Flexbox 正在重置/覆盖/更改我定义的所有 CSS 字体规则。我不知道为什么？

Flexbox is resetting / overriding / changing all my defined CSS Rules for fonts. I don't know why?

javascript

css

fonts

flexbox

bootstrap-modal