Question

使用此HTML代码。

<div class="noote">
    <p class="first admonition-title">Noote</p>
    <p class="last">Let's noote.</p>
</div>

如何用css将Noote的颜色设置为红色？我的意思是，如何用css为它设置（div class =“noote”）和（p class =“first”）？

Answer 1

试试这个：

/*this will apply for the element with class first 
inside the element with class noot */

.noote .first{    
    color:red;
}

/* If you wanted to apply a rule for both individually
you can do: */

.noote, .first{    
    border:1px solid red;
}

Answer 2

div.note{
   ...
}

指具有类注释的div元素。

p.first{
    ...
}

指具有该类的p元素。

div.note p.first{
    ...
}

指的是首先包含类的音符中的p元素。

此外，如果您想设置一个元素子元素而不设置类，

div.note p:first-child{
    /* it refers to the first p that contains noote */
}

Answer 3

@ amosrivera得到了它。

值得注意的是，后代选择器需要更多的CPU。我总是尽可能使用更具体的规则。而不是

.noote .first{
    backgorund:red;
}

你可以说

.noote > .first{
    backgorund:red;
}

在大多数情况下是名义上的差异，但仍然是一个好习惯。

<强>真的吗

后代选择器是   效率低下......不太具体   key，节点数量越多   需要评估。

- Google "Let's make the web faster" docs

和

后代选择器是一个主要的缓慢   到Safari浏览器

- John Sykes, May 2008

一些性能测试显示little impact，大多数作者都认为它只会对非常大的文档产生影响。

但主要是，我只是依赖程序员的本能 - 说出你的意思，而不是更多。

如何为类中的类设置css？

3 个答案: