调整具有fs-5类的直接子级的字体大小

Question

我使用的是媒体查询，其中我指出，基于像素，我希望div的所有直接子级(因此是p)都有一个特定的字体大小。其中有一个具有类=fs-5的p。

我看到了响应，有那个qulla类的p没有被修改，它仍然是这样的。

我怎么才能改变呢？

​

.foots {
  background-color: #0000e4;
  top: -40px;
  right: 100px;
  height: 300px;
}

@media screen and (max-width: 950px) {
  .foots>p {
    font-size: 10px;
    height: 40px;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row position-relative">

  <div class="col-3 position-absolute foots text-white text-center p-3">
    <p class="fs-5">Other Lorem Stuff</p>
    <p> > Lorem ipsum dolor sit amet</p>
    <p> > Consectetur adipiscing elit</p>
    <p> > Aenean laoreet lectus nec risus malesuada auctor.</p>
    <p> > Vestibulum pellentesque</p>
  </div>

</div>

​

Answer 1

您必须将!important指定为字体大小的样式。默认情况下，所有引导类都使用!important，它将优先于任何不重要的指定类，包括媒体查询。

​

.foots {
  background-color: #0000e4;
  top: 0px;
  right: 100px;
  height: 300px;
}

@media screen and (max-width: 950px) {
  .foots>p {
    font-size: 10px !important;
    height: 40px;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row position-relative">
  <div class="col-3 position-absolute foots text-white text-center p-3">
    <p class="fs-5">Other Lorem Stuff</p>
    <p> > Lorem ipsum dolor sit amet</p>
    <p> > Consectetur adipiscing elit</p>
    <p> > Aenean laoreet lectus nec risus malesuada auctor.</p>
    <p> > Vestibulum pellentesque</p>
  </div>

</div>

​

回应评论~

可以使用以下CSS选择所有p元素(第一个子元素除外)：

@media screen and (max-width: 950px) {
  .foots>p:not(:first-child) {
    font-size: 10px !important;
    height: 40px;
  }
}

看到它在这里起作用：

​

.foots {
  background-color: #0000e4;
  top: 0px;
  right: 100px;
  height: 300px;
}

@media screen and (max-width: 950px) {
  .foots>p:not(:first-child) {
    font-size: 10px !important;
    height: 40px;
  }
  .foots>p:nth-child(1) {
    font-size: 15px !important;
    height: 40px;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row position-relative">
  <div class="col-3 position-absolute foots text-white text-center p-3">
    <p class="fs-5">Other Lorem Stuff</p>
    <p> > Lorem ipsum dolor sit amet</p>
    <p> > Consectetur adipiscing elit</p>
    <p> > Aenean laoreet lectus nec risus malesuada auctor.</p>
    <p> > Vestibulum pellentesque</p>
  </div>

</div>

​

Answer 2

您可以删除class="fs-5"，然后像这样指定它，使整个站点的所有p字体都大小相同。

p{
  font-size: --px;
}

然后，在CSS的其余部分中，如果需要比某些元素更大或更小的CSS，则可以指定为初始字体大小的百分比。例如，您可能希望您的版权声明在每一页(或您的.foots文本)底部稍小一些。

.foots{
  font-size: 80%;
}

老实说，看起来您正在尝试使用fs-5使第一段比其他段落稍大一些。就像进入页面一样。所以，如果使用class="lead"，Bootstrap就会自动完成这一操作。这是医生..。https://getbootstrap.com/docs/5.0/content/typography/#lead