当前位置：服务支持 > 软件文章 > CSS标签、类与ID选择器详解（中文翻译）

CSS标签、类与ID选择器详解（中文翻译）

阅读数 6

在这节中，我们检查一些最简单的选择器，这些可能是日后工作中频繁使用的。

<h1>Type selectors</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
    melon azuki bean garlic.</p>

<p>Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
    greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

<p>Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce kohlrabi amaranth water spinach avocado
    daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

通配符

通配符是用*号表示。通配符会把文档中的所有元素（这些元素可能在父元素里面，用后代连接符和其他元素链接着）。在下面例子中，我们使用通配符可以移除所有元素的外边距。取代浏览器的默认样式，标题和段落外面的空白，现在所有都闭合在一起了。

* {
    margin: 0;
}

<h1>Universal selector</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
    melon azuki bean garlic.</p>

<p>Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
    greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

这种做法经常被看作是重置样式表，这会把浏览器所有的样式都去掉。因为通配符会引起全局的改变，我们使用的时候是在非常特殊的情况下，比如下面提到的这种情况。

用通配符让你的选择器更容易阅读

一个通配符的用法是让选择器更容易阅读、清晰地看它们怎么工作的。比如，如果我们想要选择所有是它们父元素的第一个子元素的后代元素，包括article的元素的第一层级里孩子，让它们变粗，我们可以使用伪元素 :first-child, 以后我们会学习更多关于伪元素和伪类元素，就像article元素选择器后面跟的子代选择器。

article :first-child {
  font-weight: bold;
}

不管怎样，看到article:first-child这样的选择器都很困惑，是不是会选择所有article元素，如果它是另一个元素的第一个子元素。

为了避免这样的困惑，我们可以给 :first-child这样的伪类元素前面加上通配符，这样这个选择器在做的事情看起来更明显。它在选择 article元素里面所有是第一个子元素的元素，或者是 article元素的子孙后代中排第一的的元素。

article *:first-child {
  font-weight: bold;
}

虽然两种写法都是一样的效果，但是可读性大大提升了。

类选择器

类选择器从打点号开始。它选择的是文档中所有拥有这个类名的元素。下面的例子中有一个类名 highlight，在文档中用了很多次。这些用了这个类名的元素都被高亮了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F1GL1MzW-1620791659909)(C:\Users\Administrator\Desktop\test\capture\捕获13.PNG)]

.highlight {
    background-color: yellow;
}

<h1 class="highlight">Class selectors</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
    melon azuki bean garlic.</p>

<p class="highlight">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
    greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

元素加类名

你可以创建一个选择器，用类名选中具体的元素。在下面的例子中，我们会用类名 highlight 高亮一个span,区别于同样使用类名 highlight 高亮的h1。我们为每个目标元素使用一个类型选择器，加上打点好的类名，中间不要空格。

在这里插入图片描述

span.highlight {
    background-color: yellow;
}

h1.highlight {
    background-color: pink;
}

<h1 class="highlight">Class selectors</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
    melon azuki bean garlic.</p>

<p class="highlight">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
    greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

这种方式减少了CSS规则的作用范围。这条CSS规则只会应用在具体的元素和类名结合的元素上。如果你想要把这条CSS规则应用在另外的元素上的话，你可能需要增加另外一个选择器。

多个类名在一个元素上

你可以在一个元素上绑定多个类名，你可以单独选择元素，或者所有的类名都在你的选择器中出现。

这会对你构建组件非常有帮助，组件可以让你在项目中多次使用。

在下面的例子中，我们会有一个包含note 信息的盒子div。当盒子有类名 notebox的时候有灰色边框，同样的如果有 warning danger，我们就改变边框颜色。

在这里插入图片描述

.notebox {
  border: 4px solid #666;
  padding: .5em;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}

<div class="notebox">
    This is an informational note.
</div>

<div class="notebox warning">
    This note shows a warning.
</div>

<div class="notebox danger">
    This note shows danger!
</div>

<div class="danger">
    This won't get styled — it also needs to have the notebox class
</div>

ID选择器

ID选择器用＃开始，虽然而不是点号开始，但是使用的方法是一样的。虽然ID只能用一次，一个元素只能使用一个ID。它用来选择标签上有ID名的元素，你可以在ID名之前写上类型选择器，这样可以指定同时具有类型和ID选择器选中的元素。你可以在下面的例子中看看这些用法。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OeGXbH8z-1620791659915)(C:\Users\Administrator\Desktop\test\capture\捕获16.PNG)]$

#one {
    background-color: yellow;
}

h1#heading {
    color: rebeccapurple;
}

<h1 id="heading">ID selector</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
    melon azuki bean garlic.</p>

<p id="one">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
    greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>