我正在使用 Grip App 模板,我做了一些更改,例如因为我无法在 groupedItems.html 中添加ID:
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<div id="item" data-win-bind="className: importancia">
<img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
<h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
</div>
</div>
</div>
在 CSS 中,我在 groupedItems.css 中进行了所有更改,例如:
.groupeditemspage .groupeditemslist #item {
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr 90px;
display: -ms-grid;
height: 250px;
width: 250px;
}
并且作为 data.js 中的常规模板效果很好我添加了一个新选项:
var sampleItems = [
{ group: sampleGroups[0], importancia: "alta", title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
{ group: sampleGroups[0], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },
{ group: sampleGroups[0], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
{ group: sampleGroups[0], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray },
{ group: sampleGroups[0], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray }];
我想改变一个项目的宽度,并在头部添加了这个代码:
<style type="text/css">
.alta {
width: 510px;
}
</style>
我不知道为什么不工作,它什么都不做。我需要改变什么?
答案 0 :(得分:1)
尝试:
<style type="text/css">
.alta {
width: 510px !important;
}
</style>
由于您将item
更改为id(与类相比),因此它现在比类(alta
)更具体,因此其宽度设置优先。使用!important将覆盖它。通过将item
更改为id,您可能会无意中影响其他样式,因此请仔细检查它是否正常工作。或者,您可以将importancia
属性添加到所有元素中,并将其默认为“item”,然后在其他情况下将其保留为“alta item”。
答案 1 :(得分:1)
我强烈建议不要使用!important
,因为它不会教你任何东西,只是一种写作风格的hackish方式。你需要了解的是更多的特定的&#34;你是一个风格,风格的先例。例如,采用以下结构:
<div id="my-div" class="outer">
<div class="inner">Some Content</div>
</div>
以下样式会产生红色文字,因为它更具有特定的&#34;:
.outer .inner { color: red; }
.inner { color: blue; }
以下示例将生成绿色文本,因为ID总是更具体:
#my-div .inner { color: green; }
.outer .inner { color: red; }
.inner { color: blue; }
所以要回答你的问题,你有以下风格(非常&#34;具体&#34;):
.groupeditemspage .groupeditemslist #item { ... }
为了给某个#item提供不同的颜色,您必须执行以下操作:
.groupeditemspage .groupeditemslist #item.alta { ... }
我还想花点时间提一下,在这样的模板中使用ID(#item)是不合适的。您只能使用一次ID ...这就是它被称为ID的原因。如果您不止一次使用某些内容,则不再识别任何内容。你应该使用一个类。