Question

我过去曾使用过gridsetapp.com来创建响应式网格，但最近我尝试过创建的网站并没有工作，我无法弄清楚原因。

指向css的链接在这里; https://get.gridsetapp.com/37722/

只是想尝试一些基本的东西：

<html><head>

<link href="https://get.gridsetapp.com/37722/" rel="stylesheet" />

</head>

<body>

    <div class="d1-d5" style="background:#aaa">ffggg</div>  
</body>
</html>

有什么想法吗？

Answer 1

尽管有一个不寻常的CSS链接，浏览器应该识别您引用的CSS文件。

但是，查看您的参考资料，您只是尝试将CSS应用于课程d1-d5。但是，正如我所知，CSS文件与Just d1-d5没有完全匹配。使用开发工具（大多数浏览器上的F12）;他们是你的朋友。它将向您显示当时应用的CSS ，包括通过JavaScript或链接文件应用的任何内容。

使用CSS，您需要确保准确地调出浏览器可以识别的内容，而不是更多（除非采用更高的优先顺序）。例如，您可以呼叫选择d1-d5的最多是：

html body div.d1-d5 {...}

在您链接的CSS文件中，我在搜索d1-d5时会看到很多家长或孩子，例如.d1-d5 .d1,.d1-d5 .d2,.d1-d5 .d3,.d1-d5 .d4,.d1-d5 .d5。如果你想要这个链中的最后一个（.d1-d5 .d5），你需要一个HTML，如：

<html>
  <body>
    <div class='d1-d5'>
      <div class='d5'>
         This text will have the CSS applied.
      </div>
    </div>
  </body>
</html>

写成.d1-d5 .d5的CSS字面意思是＆＃34;选择具有类d5的元素作为具有类.d1-d5＆＃34;的元素的后代。您的HTML不匹配CSS文件中的任何类，包括父选择器和子选择器。如果您要尝试使用上述HTML，您会看到width:18.05273834%;已应用（这不是很明显的事情......为什么不尝试background:yellow;或类似的东西以便进行简单的验证）

最后，为什么你有CSS的内联样式？这是糟糕的形式，只有在您无法控制CSS文件时才适用。

任何人都可以告诉我为什么这个网格集css不起作用？

1 个答案: