如何让 div ID 选择器在 HTML 中工作？答案

【问题标题】：How do I get div ID selector working in HTML?如何让 div ID 选择器在 HTML 中工作？
【发布时间】：2022-01-30 05:41:09
【问题描述】：

<div id="nofries">
  <h1 class="restaurant mt-5 ms-3">CRAZY GREEKS</h1>
  <h3 class="ms-5">GREEK FOOD, SUBS &amp; PIZZA</h3>
</div>

这是我的 div ID，但我的 css 无法识别它。我下课了，也没用。当它是一个类时，我什至尝试用“div.nofries”指定它；没有什么。有什么想法吗？

@media only screen and (max-width: 900px) {
    div#nofries {
        display: contents !important;
        text-shadow: -3px 2px 2px rgba(0, 0, 0, 0.63);
        margin: auto;
    }
}

另外，我使用引导程序是否重要？在 BS 中使用媒体查询的方式对我来说太令人困惑了，所以我更喜欢这种方式。会不会有干扰？

【问题讨论】：

您是否以正确的分辨率测试更改？（最大宽度 900 像素）
是的，我打开了检查工具，我不断更改屏幕分辨率以检查更改是否生效
您问题中的代码完美运行（即文本阴影显示在较窄的视口上）。你能把它变成一个 SO sn-p 并检查它是否显示你的问题。见stackoverflow.com/help/minimal-reproducible-example

标签： html css bootstrap-4

【解决方案1】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
 
  <style>
   
.tblrow{
display: flex;
background:#ccc;
padding:10px;
}
</style>
</head>
<body>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
 
  <style>
 @media  screen and (max-width: 900px) {
    div#nofries {
        display: contents !important;
        text-shadow: -3px 2px 2px rgba(0, 0, 0, 0.63);
        margin: auto;
    }
}
</style>
</head>
<body>
<div id="nofries">
  <h1 class="restaurant mt-5 ms-3">CRAZY GREEKS</h1>
  <h3 class="ms-5">GREEK FOOD, SUBS &amp; PIZZA</h3>
</div>

</body>
</html>


</body>
</html>

【讨论】：

仅从媒体查询中移除 > @media screen and (max-width: 900px)
不，当我在检查工具中移过 div 时，它甚至没有突出显示
我会和你分享代码。它工作完美
请检查它是否工作正常
Margin auto 应该使 div 居中，其内容是否正确？它没有这样做。其他一切正常。

【解决方案2】：

用声明试试吧：

#nofries {
        display: contents !important;
        text-shadow: -3px 2px 2px rgba(0, 0, 0, 0.63);
        margin: auto;
    }
}

【讨论】：

已经尝试过了，这就是为什么我想在前面更明确地使用div。