0

我正在使用Grip 应用程序模板,并且我进行了一些更改,例如因为我无法在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>

我不知道为什么不起作用,它什么也没做。我需要改变什么?

4

2 回答 2

1

尝试:

<style type="text/css">
    .alta {
        width: 510px !important;
    }
</style>

由于您更改item为 id(相对于类),它现在比类 ( alta) 更具体,因此其宽度设置将优先。使用 !important 将覆盖它。通过更改item为 id,您可能也会无意中影响其他样式,因此请仔细检查它是否可以正常工作。或者,您可以将您的importancia属性添加到所有元素中,并在其他情况下将其默认为“item”,然后是“alta item”。

于 2012-12-29T03:07:02.097 回答
1

我强烈建议不要使用!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。如果您多次使用某个东西,它就不再识别任何东西。您应该改用一个类。

于 2012-12-29T04:16:33.320 回答