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

Answer 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#someId 中或类为 someClass 的所有 div , 分别。

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

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