html - 単一部門の CSS

Question

私は初心者ですが、以下の css を単一の div のインラインスタイルとして追加する方法を教えてください。それをcssとして添付すると、すべてのdivで機能するため..コードは

@keyframes blink 


{
0% {
    opacity: 1;
}
50% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
img {
animation: blink 1s;
animation-iteration-count: infinite;
}

score 1 · Accepted Answer

あなたは単一のdivについて言いますが、現在あなたのセレクターはすべての画像用です、私はあなたが実際にやろうとしているのは1つのdiv内のすべての画像にアニメーションを適用することだと思います

現在のコード：

img {
    animation: blink 1s;
    animation-iteration-count: infinite;
}

これに似たものに更新されます：

div#someId img {
    animation: blink 1s;
    animation-iteration-count: infinite;
}

または：

div.someClass img {
    animation: blink 1s;
    animation-iteration-count: infinite;
}

これは基本的に、クラスimg内のすべてのdivまたはすべてのdivにそれぞれ次のスタイルを適用することを意味します。div#someIdsomeClass

違いは、＃（div#someId）を使用するとidでdiv要素が選択されることです。つまり<div id="someId"></div>、これは、ページ上にそのidを持つdivが1つしかない場合にのみ使用できます。

。（div.someClass）は、クラスに属するすべてのdivを選択します。つまり、これにより、クラスがsomeClassに設定されているページ上のすべてのdivが選択されます。コードがより柔軟になるため、要素が1回だけ表示されることを期待している場合でも、IDの代わりにクラスを使用することは一般的に良い形式と見なされます。つまり、誰かが同じスタイルを別の要素に使用したい場合があります。

score 0 · Accepted Answer

次のような単一のdivにidまたはclassを使用できます

 <div id="abc"></div>

次に、別のファイルまたはページでcssを適用します

 #abc
 {
    opacity:1;
 }

また

 <div class="abc"></div>

次に、別のファイルまたはページでcssを適用します

 .abc
 {
    opacity:1;
 }

使用する場合classは「。」「＃」が。に使用されている間、が使用されidます。

score 0 · Accepted Answer

より具体的な CSS セレクターを使用します。

たとえば、「foo」の id を持つ div がある場合:

<div id="foo"></div>

次に、ID セレクターを使用して、その div だけにスタイルを適用できます。

#foo {
  styles for this div only
}

さまざまな CSS セレクターの概要を以下に示します: http://reference.sitepoint.com/css/selectorref

score 0 · Accepted Answer

これを試してみてください: このサンプルでは、2 番目の div のみが ccs スタイルを持つ 3 つの div があります。

HTML:

 <div id="d1">This is a first div</div>
    <div id="d2">This is a second div and just this div have a css style</div>
    <div id="d3">This is a third div</div>

CSS:

#d2
{
    border:1px maroon dashed;
    background-color:yellow;
    font-family:Arial;
    font-size:18px;
    color:blue;
}

上記のコードの結果を見ることができます

score 0 · Accepted Answer

インラインスタイルを使用する場合は、単純に使用してみませんか

<div style="animation: blink 1s;animation-iteration-count: infinite;">

imgただし、セレクターを使用して、これを div ではなくすべての画像に適用します。

html - 単一部門の CSS

5 に答える 5

Related

Reference