CSS 选择器-2

后代选择器

.page p {
  font-size: 18px;
}

子元素选择器

.page > p {
  color: grey;
}

兄弟选择器

/* 第一种，从该元素以下的相邻兄弟选择器 */
h1 + p {
  color: red;
}

/* 第二种，从该元素以下的通用兄弟选择器 */
h1 ~ p {
  color: red;
}

交集选择器

/*
    <a class="item">111</a>
    <a class="item active">222</a>
    <a class="active">333</a>
*/

.active.menu-item {
  color: red;
}

并集选择器

h1,
h2,
h3 {
  color: red;
}

伪类选择器

同一个元素在不同动作下有不同的样式。伪类是在正常的选择器后面加上伪类名称，中间用冒号(:)隔开。

标记状态的伪类：

:link ，选取未访问过的超链接元素。

:visited ，选取访问过的超链接元素。

:hover ，选取鼠标悬停的元素。

:active ，选取点中的元素。

:focus ，选取获得焦点的元素。

筛选功能的伪类

:empty，选取没有子元素的元素，而且也没有内容填充的元素

:checked，选取勾选状态的 input 元素， 只对 radio 和 checkbox 生效。

:disabled，选取禁用的表单元素。

:first-child，选取当前选择器下第一个元素。

:last-child，选取当前选择器下最后一个元素。

:nth-child(an+b)，选取指定位置的元素。

伪元素选择器

::first-line，为某个元素的第一行文字使用样式。

::first-letter，为某个元素中的文字的首字母或第一个字使用样式。

::before，在某个元素之前插入一些内容。

::after，在某个元素之后插入一些内容。

::selection，对光标选中的元素添加样式（ ::selection 只可以应用于少数的 CSS 属性：color, background, cursor,和 outline ）