CSS基础（二）：选择器

CSS通配选择器

使用*通配符来选择所有标签，主要用于清除样式时

* {
  color: red;
}

CSS元素选择器

h1 {
  color: green;
}

CSS类选择器

在标签中使用class属性定义分类名，class属性值可以有多个类名（用空格分割）

<p class="类名">hello, world!</p>

<!-- 多个类名 -->
<p class="类名1 类名2">hello, world!</p>

使用.类名作为类选择器

.类名 {
  color: green;
}

CSS ID选择器

在标签中使用id属性定义唯一标识

<p id="唯一标识">hello, world!</p>

使用#唯一标识作为ID选择器

#唯一标识 {
  color: green;
}

CSS交集选择器

交集选择器就是多种选择器取交集，是复合选择器的一种

/* 元素选择器 && 类选择器 */
p.class {
  color: green;
}

/* 元素选择器 && id选择器 */
p#id {
  color: green;
}

/* 元素选择器 && 类选择器 && id选择器 */
p.class#id {
  color: green;
}

/* 类选择器 && 类选择器 */
.class1.class2 {
  color: green;
}

CSS并集选择器

并集选择器就是多种选择器组成，并以,分隔，是复合选择器的一种

p,
#id,
.class1,
.class2 {
  color: green;
}

CSS后代选择器

<ul class="father">
  <li class="son">
    <a id="s"></a>
  </li>
</ul>

后代之间用空格分隔，选择器可以多种组合

ul li a { color: green; }

.father .son #s { color: green; }

CSS子代选择器

子代选择器只对直接子代生效，不对后代生效

<div>
  <a></a>
  <div>
    <a></a>
  </div>
</div>

直接子代选择器使用>表示

div>a { color: green; }

CSS兄弟选择器

兄弟选择器即在同级元素中选择

<div></div>
<p></p>
<p></p>

兄弟选择器使用+表示，这里仅寻找紧相邻的

div+p { color: green; }

当使用~选择器时，选择所有兄弟

div~p { color: green; }

CSS属性选择器

<div title="value"></div>

属性选择器使用[]表示

/* 选择具有 title 属性的 */
[title] { color: green; }

/*  选择 title 属性中值为 value 的 */
[title="value"] { color: green; }

/* 选择 title 属性中值以 v 开头的(^) */
[title^="v"] { color: green; }

/* 选择 title 属性中值以 e 结尾的($) */
[title$="e"] { color: green; }

/* 选择 title 属性中值有 a 的(*) */
[title*="a"] { color: green; }