外部样式表未应用样式
[英]External style sheets not applying styles
问题描述
I have this page, to test a new layout for a category on a website at my new job: 
我有此页面，用于在我的新工作中测试网站上类别的新布局：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/grids-responsive-min.css" media="all" />
</head>
<body>
<div id="category-desc-grid" class="pure-g">
<div class="pure-u">
<p class="title"></p>
<p class="details">
Throw Style & Fitted Style<br>
71 Fabric Color Choices<br>
Fire resistant. Passes NFPA 701-2010<br>
Full Color Dye Sublimation
</p>
<a href="#" class="button">Buy/View 24 Hour Tablecloths</a>
</div>
<div class="pure-u-1-2">
<p class="title">Single Color Front Panel, Fitted Table Colors & Throws</p>
<p class="details">
4ft, 5ft, 6ft, 8ft<br>
74 Fabric Color Choices,<br>
including neon colors.<br>
Fire resistant. Passes<br>
NFPA 701-2010
</p>
<a href="#" class="button">Available in 1, 2, or 3 Day Production</a>
</div>
<div class="pure-u-1-2">
<p class="title">Full Color Print Front Panel</p>
<p class="details">
Additional Panel Print $99<br>
Fitted & Throw Style<br>
4ft, 5ft, 6ft, 8ft<br>
71 Fabric Choices<br>
F.R. - NFPA 701-2010
</p>
<a href="#" class="button">Available in 1, 2, or 3 Day Production</a>
</div>
</div>
</body>
</html>
All of the stylesheets included are the mass that they have included in the head of the page that this code is to be inserted into, save for the last one, the Pure Grid . 所包括的所有样式表都是该代码要插入到页面顶部的质量，最后一个是Pure Grid 。 This is the one in question which will not apply any of its styles. 这是有问题的，将不会应用任何样式。 As you can see I have the classes from that stylesheet in my HTML, but no styles are being attributed to them upon inspection. 如您所见，我的HTML中有该样式表中的类，但是在检查时没有样式归因于它们。 Styles from the stylesheets prior, however, are being applied. 但是，将应用样式表之前的样式。
Why 为什么
I've removed the grid stylesheet altogether and added one simple line: .display-grid .half { display: inline-block; width: 50%; max-width: 50%; } 我完全删除了网格样式表，并添加了一条简单的行： .display-grid .half { display: inline-block; width: 50%; max-width: 50%; } .display-grid .half { display: inline-block; width: 50%; max-width: 50%; } .display-grid .half { display: inline-block; width: 50%; max-width: 50%; } but it will only split into halves if I exclude the width rule. .display-grid .half { display: inline-block; width: 50%; max-width: 50%; }但它只会分为两半，如果我排除的宽度规则。 Unbelievable. 难以置信的。
I just added the Bootstrap grid standalone. 我刚刚添加了独立的Bootstrap网格。
2 个解决方案
解决方案1
0 2017-12-05 17:12:58
I replicated your code on my system. 我在系统上复制了您的代码。 The inspect console complained that no character encoding was declared, so i inserted a <meta charset="utf-8"/> snippet in the <head> tags. 检查控制台抱怨没有声明任何字符编码，因此我在<head>标记中插入了<meta charset="utf-8"/>片段。
Also, I looked at the Pure Grid css file. 另外，我查看了Pure Grid CSS文件。 It looks like some elements are missing when you used the class names. 使用类名时，似乎缺少某些元素。 For example, I changed "pure-u" to "pure-u-sm-1-24" and it worked in my browser. 例如，我将"pure-u"更改为"pure-u-sm-1-24"并且可以在我的浏览器中使用。
解决方案2
-1 2017-12-05 18:45:16
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/js/tm/easylightbox/lightbox/css/lightbox.css" /> <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/default/delivery/css/reset.css" media="all" /> <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/default/delivery/css/boxes.css" media="all" /> <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/default/delivery/css/styles.css" media="all" /> <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/default/delivery/css/menu.css" media="all" /> <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/css/widgets.css" media="all" /> <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/css/aitpagecache.css" media="all" /> <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/crimson/catalog/css/catalog.css" media="all" /> <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/magmodules/snippets/snippets.css" media="all" /> <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/magmodules/snippets/breadcrumbs.css" media="all" /> <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/css/tm/easytabs.css" media="all" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/grids-responsive-min.css" media="all" /> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css"/> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-min.css"/> </head> <body> <div id="category-desc-grid" class="pure-g"> <div class="pure-u"> <p class="title"></p> <p class="details"> Throw Style & Fitted Style<br> 71 Fabric Color Choices<br> Fire resistant. Passes NFPA 701-2010<br> Full Color Dye Sublimation </p> <a href="#" class="button">Buy/View 24 Hour Tablecloths</a> </div> <div class="pure-u-1-2"> <p class="title">Single Color Front Panel, Fitted Table Colors & Throws</p> <p class="details"> 4ft, 5ft, 6ft, 8ft<br> 74 Fabric Color Choices,<br> including neon colors.<br> Fire resistant. Passes<br> NFPA 701-2010 </p> <a href="#" class="button">Available in 1, 2, or 3 Day Production</a> </div> <div class="pure-u-1-2"> <p class="title">Full Color Print Front Panel</p> <p class="details"> Additional Panel Print $99<br> Fitted & Throw Style<br> 4ft, 5ft, 6ft, 8ft<br> 71 Fabric Choices<br> FR - NFPA 701-2010 </p> <a href="#" class="button">Available in 1, 2, or 3 Day Production</a> </div> </div> </body> </html>
Above you forgot to add two more files like- base-min.js and grids-min.js 在上面，您忘了添加另外两个文件，例如base-min.js和grids-min.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.