跳转至

选择器

标签选择器

p {
  text-align: center;
  color: red;
}

id 选择器

#id {
  text-align: center;
  color: red;
}

类选择器

.class {
  text-align: center;
  color: red;
}

通用全局选择器

* {
  text-align: center;
  color: red;
}

分组选择器

同时选中 h1, h2, p 标签

h1, h2, p {
  text-align: center;
  color: red;
}

标签类选择器

选中类名为 important 的 <p> 标签.

p.important {
    color: red;
}

多类选择器

<p class="important warning">
    This paragraph is a very important warning.
</p>

.important.warning {
    background: silver;
}

属性选择器

可以选中标签 <a href=""></a>.

[href] {
    color: red;
}

可以限制标签选：

a[href] {
    color: red;
}

还可以进一步限制属性的选择：

a[href][title] {
    color: red;
}

还可以加上「属性="值"」选择：

<a href="http://www.w3school.com.cn/" title="W3School">W3School</a>

a[href="http://www.w3school.com.cn/"][title="W3School"] {
    color: red;
}

后代选择器

可以选择某个标签的所有后代：

h1 em {
    color: red;
}

可以选择 p 标签下的所有后代 em.

子元素选择器

如果你不希望选中所有的后代，而只想选中儿子标签：

h1 > strong {
    color: red;
}

这样就可以选中 h1 标签下的子标签 strong.

相邻选择器

选中与 li 相邻的 li 元素.

li + li {
    font-weight: bold;
}