为什么不能在Windows Store模板中使用CSS ?
Why doesn't work the CSS in a Windows Store Template?
我使用的是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中,我在 groupeditem . 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>
我不知道为什么不工作,它什么都不做。我需要改变什么?
尝试:
<style type="text/css">
.alta {
width: 510px !important;
}
</style>
由于您将item
更改为id(相对于类),它现在比类(alta
)更具体,因此其宽度设置将优先考虑。使用!important将覆盖它。通过将item
更改为id,您可能会无意中影响其他样式,因此请仔细检查它是否正常工作。或者,您可以将importancia
属性添加到所有元素中,并将其默认为"item",然后在其他情况下为"alta item"。
我强烈建议不要使用!important
,因为它没有教给你任何东西,只是一种拙劣的编写样式的方式。你需要明白的是,你对一种风格的描述越"具体",这种风格的先例就越高。例如,采用以下结构:
<div id="my-div" class="outer">
<div class="inner">Some Content</div>
</div>
以下样式将产生红色文本,因为它更"具体":
.outer .inner { color: red; }
.inner { color: blue; }
下面的示例将生成绿色文本,因为id总是更具体:
#my-div .inner { color: green; }
.outer .inner { color: red; }
.inner { color: blue; }
所以要回答你的问题,你可以用下面的风格(这是非常"具体"的):
.groupeditemspage .groupeditemslist #item { ... }
要给某个#item赋予不同的颜色,必须执行以下操作:
.groupeditemspage .groupeditemslist #item.alta { ... }
我还想借此机会指出,在这样的模板中使用ID (#item)是不合适的。一个ID只能使用一次…这就是为什么它被称为ID。如果你使用一个东西超过一次,它就不再能识别任何东西。您应该使用类来代替。
相关文章:
- 取消img的css属性宽度和高度(不能使用“auto”)
- "npm运行构建:css"不能工作,而当我自己运行脚本时是可以的
- 如何在HTML / CSS中填充垂直和滚动中间窗格(Chrome可以工作,但不能Firefox)
- 为什么z-index不能在Chrome中使用CSS列
- CSS和Javascript可以在内部服务器上工作,但不能在外部工作
- CSS 不能与 NodeJS 一起使用
- 应用于Handsontable网格行上的CSS不能正常工作
- javascript重定向后CSS不能正确加载
- jQuery- .css()不能用于输入
- JavaScript / css不能在Sharepoint WebPart中工作
- Chrome和jquery css不能正常工作
- CSS不能在IE6-7中工作
- 表达式引擎2.2.2;为什么我的CSS不能在任何地方工作?
- CSS不能与Flask一起工作
- CSS不能与API Iframe一起工作
- HTML CSS不能改变表列宽度
- Timeticker css不能在visjs时间轴中工作
- CSS不能链接到HTML
- Phonegap / Cordova css不能正常工作
- jQuery css()不能在条件语句中工作