如何在CSS中选择类和标签？

Question

仅当元素同时满足类和标签时，才可以选择元素吗？例如，在下面的代码中，我只想选择文本的第二行：

<div class="foo">
    <p>Apple</p>
    <p class="foo">Banana</p>
</div>

使用<p>标签将选择两行，而使用.foo类将选择文本和<div>。有没有一种方法可以定义将两者结合在一起的css规则？例如“ p && .foo {...}”或类似的内容。

Answer 1

p.foo { color: red; }完成了任务。组合元素（p和类（foo）。

the morgan docs和Here，您可以找到有关不同CSS选择器的更多信息。

摘要

p.foo {
  color: red;
}

<div class="foo">
    <p>Apple</p>
    <p class="foo">Banana</p>
</div>

Answer 2

p.foo { ...是您要寻找的。

编辑：演示：

p {
  font-size: 20px;
}

p.foo {
  font-size: 40px;
}

<div class="foo">
    <p>Apple</p>
    <p class="foo">Banana</p>
</div>

Answer 3

这将选择您需要的内容。

<style>
p.foo {color: black;}
</style>

Answer 4

您只需要在.规则中组合标签和类。试试这个：

p.foo {
  //your code
}

Answer 5

您可以组合选择器，但不要在选择器之间放任何东西，在您的情况下为sample。 p.foo和p之间的空白在技术上是CSS中的组合器之一，并且有一些。

例如，您可以执行.foo。这将匹配所有标签名称为element.class#id[attribute=value]，类为element，id为class且属性值为id的元素attribute的元素。例如，这个人：

value

您可以了解有关selectors and combinators here的更多信息。