CSS选择器

了解有关CSS选择器的所有最重要的信息

选择器使我们可以将一个或多个声明与页面上的一个或多个元素相关联。

基本选择器

假设我们有一个p页面上的元素,我们希望使用黄色将单词显示在其中。

我们可以目标使用选择器的那个元素p,它使用来定位所有元素p在页面中标记。实现我们想要的简单CSS规则是:

p {
  color: yellow;
}

每个HTML标签都有一个对应的选择器,例如:divspanimg

如果选择器与多个元素匹配,则页面中的所有元素都将受到更改的影响。

HTML元素具有2个属性,它们在CSS中非常常用于将样式与页面上的特定元素相关联:classid

两者之间有一个很大的区别:在HTML文档中,您可以重复相同的内容class跨多个元素的价值,但您只能使用id一次。因此,使用类可以选择具有2个或更多个特定类名的元素,而使用id则无法实现。

使用.符号,而ID使用#象征。

使用类的示例:

<p class="dog-name">
  Roger
</p>
.dog-name {
  color: yellow;
}

使用ID的示例:

<p id="dog-name">
  Roger
</p>
#dog-name {
  color: yellow;
}

组合选择器

到目前为止,我们已经了解了如何定位元素,类或ID。让我们介绍更强大的选择器。

使用类别或ID定位元素

您可以定位附加了类或ID的特定元素。

使用类的示例:

<p class="dog-name">
  Roger
</p>
p.dog-name {
  color: yellow;
}

使用ID的示例:

<p id="dog-name">
  Roger
</p>
p#dog-name {
  color: yellow;
}

如果类或id已经提供了一种针对该元素的方法,那么为什么要这样做呢?您可能需要这样做才能拥有更多特异性。稍后我们将了解这意味着什么。

针对多个类别

您可以使用来指定特定类别的元素.class-name,如您先前所见。通过组合用点分隔的类名(不带空格),可以将元素定位为2个(或更多)类。

例子:

<p class="dog-name roger">
  Roger
</p>
.dog-name.roger {
  color: yellow;
}

结合类和ID

同样,您可以组合一个类和一个id。

例子:

<p class="dog-name" id="roger">
  Roger
</p>
.dog-name#roger {
  color: yellow;
}

分组选择器

您可以组合选择器以将相同的声明应用于多个选择器。为此,请用逗号分隔它们。

例子:

<p>
  My dog name is:
</p>
<span class="dog-name">
  Roger
</span>
p, .dog-name {
  color: yellow;
}

您可以在这些声明中添加空格以使其更清晰:

p,
.dog-name {
  color: yellow;
}

使用选择器跟随文档树

我们已经了解了如何通过使用标签名称,类或ID来定位页面中的元素。

您可以通过组合多个项目来遵循文档树结构来创建更具体的选择器。例如,如果您有一个span标签嵌套在p标签,您可以定位该广告对象,而无需将样式应用于span标签未包含在p标签:

<span>
  Hello!
</span>
<p>
  My dog name is:
  <span class="dog-name">
    Roger
  </span>
</p>
p span {
  color: yellow;
}

看看我们如何在两个标记之间使用空格pspan

即使右侧的元素深达多个级别,此方法也有效。

要在第一层上严格限制依赖关系,可以使用>两个标记之间的符号:

p > span {
  color: yellow;
}

在这种情况下,如果span不是第一个孩子p元素,则不会应用新颜色。

直接的孩子将应用以下样式:

<p>
  <span>
    This is yellow
  </span>
  <strong>
    <span>
      This is not yellow
    </span>
  </strong>
</p>

相邻的同级选择器使我们仅在元素前面有特定元素的情况下才对元素进行样式设置。我们使用+操作员:

例子:

p + span {
  color: yellow;
}

这会将黄色分配给所有跨度元素,后跟一个p元素:

<p>This is a paragraph</p>
<span>This is a yellow span</span>

我们可以使用更多选择器:

  • 属性选择器
  • 伪类选择器
  • 伪元素选择器

有关未来职位的更多信息。

免费下载我的CSS手册


更多CSS教程: