如何在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）。

Here和here你可以找到有关不同CSS选择器的更多信息。

Snippet

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。 p和.foo之间的空白在技术上是CSS中的组合之一，还有一些。

例如，你可以做element.class#id[attribute=value]。这将匹配标签名为element的所有元素，类为class，id为id，名为attribute，其值为value。例如，这家伙：

<element class="class foo bar" id="id" attribute="value"></element>

您可以阅读更多关于selectors and combinators here的信息。

Answer 5

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

p.foo {
  //your code
}