0

我是初学者，谁能告诉我如何将下面的 CSS 添加为单个 div 的内联样式。因为当我将它作为 CSS 附加时，它适用于所有 div .. 代码是

@keyframes blink 


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

5 回答 5

1

您说的是单个 div，但目前您的选择器适用于所有图像，我假设您实际上想要做的是将动画应用于仅一个 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#someIdclass 中的每个或所有 div 中someClass。

不同之处在于使用 # ( div#someId) 通过 id 选择 div 元素，即<div id="someId"></div>，但只能/应该仅在页面上只有一个具有该 id 的 div 时使用。

这 。( div.someClass) 选择属于某个类的所有 div，即，这将选择页面上所有将其类设置为 someClass 的 div。通常认为使用类而不是 id 是一种很好的形式，即使您只希望元素出现一次，因为它使代码更加灵活，即，有人可能希望对跟踪中的另一个元素使用相同的样式。

于 2012-12-21T07:08:18.420 回答
0

使用更具体的 CSS 选择器。

例如，如果您有一个 id 为“foo”的 div：

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

然后，您可以使用 ID 选择器将样式应用于该 div：

#foo {
  styles for this div only
}

以下是不同 CSS 选择器的概述：http ://reference.sitepoint.com/css/selectorref

于 2012-12-21T06:56:31.947 回答
0

试试这个：在这个示例中，我们有 3 个 div，只有第二个 div 具有 ccs 样式。

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

你可以看到上面代码的结果

于 2012-12-21T07:24:59.040 回答
0

您可以将 id 或 class 用于单个 div，例如

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

然后在不同的文件或页面中应用 css

 #abc
 {
    opacity:1;
 }

或者

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

然后在不同的文件或页面中应用 css

 .abc
 {
    opacity:1;
 }

如果你使用class那么“。” 用于，而“#”用于id.

于 2012-12-21T07:02:33.013 回答
0

如果你想使用内联样式，你为什么不简单地使用

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

但是您使用选择器将其应用于所有图像，而不是 div img。

于 2012-12-21T07:10:50.343 回答