CSS 选择器 - Simple selectors

最新推荐文章于 2021-04-25 23:39:31 发布

原创最新推荐文章于 2021-04-25 23:39:31 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

11 篇文章

订阅专栏

本文深入讲解了CSS中各种选择器的使用方法，包括类型选择器、类选择器、ID选择器和通用选择器。通过实例展示了如何精确地定位并样式化网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Simple selectors

Type selectors

亦称为 element selectors。这种选择器对大小写不敏感。

<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer BLACK!</p>

/* All p elements are red */
p {
  color: red;
}

/* All div elements are blue */
div {
  color: blue;
}

Class selectors

此选择器由：'.' + className 组成。

注意：同一文档中的多个元素可以拥有相同的类名；某单一的元素可以拥有多个类名，这些类名由空格分隔开。

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}

/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

ID selectors

此选择器由：'#'+ID name 组成。

任何元素都拥有一个由 id 属性设定的唯一的 ID 名称。这种方式是选择单一元素的最高效的方式。

<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

Universal selector

'*' 代表通用选择器，其可以选择页面中的所有元素。

<div>
  <p>I think the containing box just needed
  a <strong>border</strong> or <em>something</em>,
  but this is getting <strong>out of hand</strong>!</p>
</div>

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}