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 }];

そして、1 つのアイテムの幅を変更したいので、次のコードを head に追加しました。

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

なぜ機能しないのかわかりません。何もしません。何を変更する必要がありますか?

4

2 に答える 2

1

I strongly recommend against using !important, as it's not teaching you anything but a hackish way to write styles. The thing you need to understand is the more "specific" you are with a style, the higher precedent that style has. For example, take the following structure:

<div id="my-div" class="outer">
    <div class="inner">Some Content</div>
</div>

The following styles would yield red text because it's more "specific":

.outer .inner { color: red; }
.inner { color: blue; }

The following example would yield green text, as IDs are ALWAYS more specific:

#my-div .inner { color: green; }
.outer .inner { color: red; }
.inner { color: blue; }

So to answer your question, you have the following style (which is very "specific"):

.groupeditemspage .groupeditemslist #item { ... }

In order to give a certain #item a different color, you must do the following:

.groupeditemspage .groupeditemslist #item.alta { ... }

I would also like to take this time to mention that your use of an ID (#item) within a template like this is not proper. You can only use an ID once... which is why it's called an ID. If you use something more than once, it's no longer identifying anything. You should use a class instead.

于 2012-12-29T04:16:33.320 に答える
1

試す：

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

ID (対クラス) に変更itemしたため、現在はクラス () よりも具体的であるaltaため、その幅の設定が優先されます。!important を使用すると、それがオーバーライドされます。ID を変更itemすると、他のスタイルにも影響を与える可能性があるため、問題なく動作することを再確認してください。importanciaまたは、すべての要素にプロパティを追加し、デフォルトで「item」に設定し、それ以外の場合は「alta item」に設定することもできます。

于 2012-12-29T03:07:02.097 に答える