面试题之css（二）

什么是选择器，它们之间的优先级是什么样的？

元素选择器

1
2
3
p {
  color: blue;
}

选择所有 <p> 元素。

类选择器

1
2
3
.className {
  color: red;
}

选择所有带有 class="className" 的元素。

ID 选择器

1
2
3
#idName {
  color: green;
}

选择带有 id="idName" 的元素。

属性选择器

1
2
3
a[target="_blank"] {
  color: orange;
}

选择所有 target 属性值为 _blank 的 <a> 元素。

后代选择器

1
2
3
div p {
  color: purple;
}

选择所有位于 <div> 元素内的 <p> 元素。

子选择器

1
2
3
div > p {
  color: yellow;
}

选择所有作为 <div> 元素直接子元素的 <p> 元素。

相邻兄弟选择器

1
2
3
h1 + p {
  color: pink;
}

选择紧接在 <h1> 元素后的第一个 <p> 元素。

通用兄弟选择器

1
2
3
h1 ~ p {
  color: brown;
}

选择所有位于 <h1> 元素之后的兄弟 <p> 元素。

伪类选择器

1
2
3
a:hover {
  color: cyan;
}

选择用户鼠标悬停的 <a> 元素。

伪元素选择器

1
2
3
4
p::before {
  content: "Hello ";
  color: black;
}

选择每个 <p> 元素的内容之前插入 “Hello “。

CSS 选择器优先级

CSS 选择器的优先级按照以下规则进行计算：

  • 内联样式 (Inline styles)，如：style=”…”，权重为 1000。
  • ID 选择器，权重为 100。
  • 类选择器、属性选择器和伪类选择器，权重为 10。
  • 元素选择器和伪元素选择器，权重为 1。
  • 通配符选择器（*），权重为 0。

权重从高到低依次是：内联样式 > ID 选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器/伪元素选择器 > 通配符选择器。