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

这实际上是说将以下样式分别应用于div#someId中包含的每个img或具有someClass类的所有div。

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

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

Answer 2

使用更具体的CSS选择器

例如，如果你有一个id为"foo"的div:

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

然后你可以用ID选择器对这个div应用样式:

#foo {
  styles for this div only
}

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

Answer 3

您可以使用id或class作为单个div，例如

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

然后在另一个文件或页面

应用css

 #abc
 {
    opacity:1;
 }

或

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

然后在另一个文件或页面

应用css

 .abc
 {
    opacity:1;
 }

如果使用class，则使用"."，而id则使用"#"。

Answer 4

如果你想使用内联样式，为什么不直接使用

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

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

Answer 5

试试这个:在这个例子中，我们有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;
}

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