CSS选择器

层叠样式表* (Cascading Style Sheets)
描述 HTML 文档样式的语言。描述应该如何显示 HTML 元素

css选择器

简单选择器
元素选择器

在此例中，所有 <p> 元素都将居中对齐，并带有红色文本颜色：
p {
  color: red;
  text-align: center;
}

Id选择器

这条 CSS 规则将应用于 id="para1" 的 HTML 元素：
id 名称不能以数字开头
#para1 {
	......
}

CSS 类选择器

1、应用于 class="center" 的 HTML 元素：
.center {
	......
}
2、只有具有 class="center" 的 <p> 元素会居中对齐：
p.center {
  .......
}

CSS 通用选择器

影响页面上的每个 HTML 元素：
* {
	.......
}

CSS 分组选择器
如h1、h2 和 p 元素具有相同的样式定义，可进行分组

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

CSS 组合器
后代选择器 (空格)

后代选择器匹配属于指定元素后代的所有元素。
如下选择 <div> 元素内的所有 <p> 元素：

div p {
  background-color: yellow;
}

子选择器 (>)

子选择器匹配属于指定元素子元素的所有元素。
如下选择属于 <div> 元素子元素的所有 <p> 元素：

div > p {
  background-color: yellow;
}

相邻兄弟选择器 (+)

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
如下选择紧随 <div> 元素之后的所有 <p> 元素：

div + p {
  background-color: yellow;
}

通用兄弟选择器 (~)

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
如下选择属于 <div> 元素的同级元素的所有 <p> 元素：

div ~ p {
  background-color: yellow;
}

伪类选择器
伪类用于定义元素的特殊状态。
例如，它可以用于：
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

悬停在 <div> 上
在 <div> 元素上使用 :hover 伪类的实例：

div:hover {
  background-color: blue;
}

把鼠标悬停到 <div> 元素以显示 <p> 元素（类似工具提示的效果）：
悬停到我上面来显示 <p> 元素。
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

匹配所有 <p> 元素中的首个 <i> 元素：

p i:first-child {
  color: blue;
}

伪元素选择器
CSS 伪元素用于设置元素指定部分的样式。
例如，它可用于：
设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

为所有 <p> 元素中的首行添加样式：
::first-line 伪元素只能应用于块级元素。
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

::first-letter 伪元素用于向文本的首字母添加特殊样式。
::first-letter 伪元素只适用于块级元素

伪元素可以与 CSS 类结合使用：
以红色和较大的字体显示 class="intro" 的段落的首字母
p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

::before 伪元素

::before 伪元素可用于在元素内容之前插入一些内容。
下面的例子在每个 <h1> 元素的内容之前插入一幅图像：

h1::before {
  content: url(smiley.gif);
}

::after 伪元素
::after 伪元素可用于在元素内容之后插入一些内容。

::selection 伪元素
::selection 伪元素匹配用户选择的元素部分。
以下 CSS 属性可以应用于 ::selection：
color
background
cursor
outline

属性选择器
[attribute] 选择器

用于选取带有指定属性的元素。
下例选择所有带有 target 属性的 <a> 元素；

a[target] {
  background-color: yellow;
}

[attribute=“value”] 选择器

用于选取带有指定属性和值的元素。
下例选取所有带有 target="_blank" 属性的 <a> 元素：

a[target="_blank"] { 
  background-color: yellow;
}

[attribute~=“value”] 选择器

选取属性值包含指定词的元素。
下例选取 title 属性包含 "flower" 单词的所有元素：

[title~="flower"] {
  border: 5px solid yellow;
}
会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。

[attribute|=“value”] 选择器

于选取指定属性以指定值开头的元素。
下例选取 class 属性以 "top" 开头的所有元素：
注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

[class|="top"] {
  background: yellow;
}