调整具有 class fs-5 的直接子项的字体大小

Question

我正在使用一个媒体查询，其中我指出基于像素我希望 div 的所有直接子项（因此是 p）具有特定的字体大小。其中有一个 p 具有 class=fs-5.

我看到responsive了，那个qulla的pclass没有修改，保持原样

如何更改？

.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 指定为您的 font-size 样式。默认情况下，所有 Bootstrap 类使用 !important，这将优先于任何 non-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>

回复评论~

您可以 select 除了第一个子元素之外的所有 p 元素，使用以下 CSS:

@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;
}

.foots{
  font-size: 80%;
}

老实说，您似乎在尝试使用 fs-5 使第一段比其余段略大。喜欢一个 lead-in 到页面。因此，如果您使用 class="lead"，Bootstrap 会自动执行此操作。这是文档... https://getbootstrap.com/docs/5.0/content/typography/#lead

调整具有 class fs-5 的直接子项的字体大小

resize font-size of direct child which has class fs-5

css

media-queries

twitter-bootstrap

bootstrap-4

bootstrap-5