我正在使用媒體查詢，我根據像素指示我希望 div 的所有直接子項（因此是 p）具有特定的字體大小。其中有 ap 的 class=fs-5。
我看到了回應式，具有該 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/[email protected]/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>uj5u.com熱心網友回復：
您必須指定!important您的字體大小樣式。默認情況下使用所有 Bootstrap 類!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/[email protected]/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>回復評論~
您可以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/[email protected]/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>uj5u.com熱心網友回復：
您可以洗掉并改為像這樣指定它，以使p整個站點的所有字體大小相同。
p{
font-size: --px;
}
然后，在其余的 CSS 中，如果您需要它大于或小于某些元素的大小，您可以指定為初始字體大小的百分比。例如，您可能希望您的著作權宣告在每頁（或您的.foots文本）的底部稍微小一些。
.foots{
font-size: 80%;
}
老實說，您似乎正在嘗試fs-5使第一段略大于其他段落。就像頁面的引入一樣。因此，如果您使用 Bootstrap 會自動執行此操作。這是檔案... https://getbootstrap.com/docs/5.0/content/typography/#lead
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/445229.html
標籤：css 推特引导 引导程序 4 媒体查询 引导程序 5