标签选择器

基于html标签名设置样式

p {
  margin: 1em 0 1em 0;
  background-color: #ff0000;
}

ID选择器

基于html标签的id属性值设置样式 以"#"开头 + html标签的id属性值

#div1 {
  background-color: #0000ff;
}

类选择器

基于html标签的class值设置样式 以"."开头 + html标签的class值

.container {
  width: 200px;
  background-color: #ca76ca;
  padding: 20px;
}

属性选择器

对带有指定属性的 HTML 元素设置样式 以"[]"包含 HTML 元素 的属性 或者 属性和值

[title]{
  color:#00ffff;
}

[title="Hello world"] {
  color:#00ff00;
}

以上4类选择器的示例：

  <div class="container">
    <p>一行文字</p>
    <p title="Hello world">Hello world</p>
    <p title="Hello">Hello</p>
    <div id="div1">块级元素</div>
  </div>

伪类选择器

有一个冒号的选择器，用来添加一些选择器的特殊效果。 跟类选择器的区别在于 类选择器可以随便，伪类选择器是固有的一些，比如:first-child、:last-child等

• :first-child 选择父元素下的第一个子元素
• :last-child 选择父元素下的最后一个子元素
• :nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。n 可以是一个数字，一个关键字，或者一个公式。
• :nth-child(odd) 奇数子元素(同nth-child(2n-1))
• :nth-child(even) 偶数子元素(同nth-child(2n))
• :nth-last-child(n) 倒数第n个子元素
• :before 选择器向选定的元素前插入内容。
• :after 选择器向选定的元素之后插入内容。

.container {
  width: 200px;
  background-color: #00ffff;
  padding: 20px;
}

p {
  margin: 1em 0 1em 0;
}

#div1 {
  background-color: #ff00ff;
}

#div2 {
  background-color: #ff0000;
}

选择器匹配作为任何元素的第一个子元素的 p 元素，设置字体颜色为blue

p:first-child {
  color:blue;
}

伪元素选择器

连续两个冒号的选择器。::符号是用来区分伪类和伪元素的。 如::first-line、::first-letter、::before和::after

• ::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。
• ::after用来创建一个伪元素，作为已选中元素的最后一个子元素。 常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

  <div class="container">
    <div id = "div1">
      <p>一行文字</p>
      <p>一行文字</p>
    </div>
    <div id = "div2">
      <p>一行文字</p>
      <p>一行文字
        <div>hhhh</div>
      </p>
    </div>
  </div>

p::before {
  content: "♥";
}

p::after {
  content: "♥♥";
}

结构选择器

基于html标签间的结构关系 常见的符合有空格、>、~、+

• 后代选择器： E空格F 选择E元素的所有后代
• 子元素选择器：E>F
  只能选择E元素的直接后代，不能跨代选取
• 通用兄弟选择器：E~F
  用于选择E元素后面的所有兄弟元素F。
• 相邻兄弟选择器：E+F
  相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素。

选择器优先级

内联 > ID选择器 > 类选择器 > 标签选择器。

 <p id="content" class='content'>一行文字</p>

p {
  margin: 1em 0 1em 0;
  background-color: #ff0000;
  color:#000000;
}

.content {
  background-color: #ff00ff;
}

#content {
  background-color: #0000ff; 
}

最终文本的背景颜色以#content 为准，是蓝色（#0000ff）。

参考资料

深入理解CSS选择器优先级