CSS 选择器

基本选择器

1. 元素选择器

h1 {
  color: red;
}

p {
  font-size: 16px;
}

2. 类选择器

.highlight {
  background-color: yellow;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

3. ID 选择器

#header {
  background-color: #333;
  color: white;
}

#main-content {
  padding: 20px;
}

4. 通配符选择器

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

组合选择器

1. 后代选择器

.container p {
  color: #333;
}

ul li a {
  text-decoration: none;
}

2. 子选择器

.container > p {
  color: #333;
}

ul > li {
  margin-bottom: 10px;
}

3. 相邻兄弟选择器

h2 + p {
  font-weight: bold;
}

li + li {
  margin-top: 10px;
}

4. 通用兄弟选择器

h2 ~ p {
  color: #666;
}

.active ~ .item {
  opacity: 0.5;
}

属性选择器

1. 存在属性

a[href] {
  color: blue;
}

input[type] {
  border: 1px solid #ccc;
}

2. 精确匹配

a[href="https://example.com"] {
  color: green;
}

input[type="text"] {
  width: 200px;
}

3. 部分匹配

/* 以...开头 */
a[href^="https://"] {
  color: blue;
}

/* 以...结尾 */
a[href$=".pdf"] {
  color: red;
}

/* 包含... */
a[href*="example"] {
  font-weight: bold;
}

/* 包含单词... */
a[href~="example"] {
  text-decoration: underline;
}

/* 以...开头或连字符分隔 */
a[href|="en"] {
  color: purple;
}

伪类选择器

1. 链接伪类

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: orange;
}

2. 表单伪类

input:focus {
  outline: 2px solid blue;
}

input:checked {
  border: 2px solid green;
}

input:disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
}

input:enabled {
  background-color: white;
}

input:required {
  border: 2px solid red;
}

input:optional {
  border: 1px solid #ccc;
}

input:valid {
  border: 2px solid green;
}

input:invalid {
  border: 2px solid red;
}

input:in-range {
  border: 2px solid green;
}

input:out-of-range {
  border: 2px solid red;
}

3. 结构伪类

/* 第一个子元素 */
li:first-child {
  font-weight: bold;
}

/* 最后一个子元素 */
li:last-child {
  border-bottom: none;
}

/* 第n个子元素 */
li:nth-child(odd) {
  background-color: #f0f0f0;
}

li:nth-child(even) {
  background-color: #fff;
}

li:nth-child(3) {
  color: red;
}

li:nth-child(3n) {
  border-top: 1px solid #ccc;
}

/* 倒数第n个子元素 */
li:nth-last-child(2) {
  color: blue;
}

/* 唯一的子元素 */
div:only-child {
  width: 100%;
}

/* 第一个指定类型的元素 */
p:first-of-type {
  font-weight: bold;
}

/* 最后一个指定类型的元素 */
p:last-of-type {
  margin-bottom: 0;
}

/* 第n个指定类型的元素 */
p:nth-of-type(2) {
  color: red;
}

/* 倒数第n个指定类型的元素 */
p:nth-last-of-type(2) {
  color: blue;
}

/* 唯一的指定类型元素 */
p:only-of-type {
  width: 100%;
}

/* 根元素 */
:root {
  --primary-color: #007bff;
}

/* 空元素 */
div:empty {
  display: none;
}

/* 目标元素 */
section:target {
  animation: highlight 1s;
}

/* 否定伪类 */
:not(.active) {
  opacity: 0.5;
}

input:not([type="submit"]) {
  width: 200px;
}

伪元素选择器

/* 首字母 */
p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

/* 首行 */
p::first-line {
  color: red;
}

/* 前置内容 */
p::before {
  content: "→ ";
  color: blue;
}

/* 后置内容 */
p::after {
  content: " ←";
  color: blue;
}

/* 选中的文本 */
::selection {
  background-color: yellow;
  color: black;
}

/* 占位符 */
input::placeholder {
  color: #999;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

选择器优先级

优先级规则

1. !important（最高优先级）
2. 内联样式（1000）
3. ID选择器（100）
4. 类选择器、属性选择器、伪类选择器（10）
5. 元素选择器、伪元素选择器（1）
6. 通配符选择器（0）

优先级计算

/* 优先级: 0,0,1 */
div {
  color: red;
}

/* 优先级: 0,1,0 */
.container {
  color: blue;
}

/* 优先级: 1,0,0 */
#header {
  color: green;
}

/* 优先级: 0,1,1 */
.container div {
  color: purple;
}

/* 优先级: 1,1,1 */
#header .container div {
  color: orange;
}

/* 最高优先级 */
div {
  color: red !important;
}

面试常见问题

1. CSS 选择器的优先级是如何计算的？

按照以下规则计算：

• !important: 最高优先级
• 内联样式: 1000
• ID选择器: 100
• 类选择器、属性选择器、伪类选择器: 10
• 元素选择器、伪元素选择器: 1
• 通配符选择器: 0

#header .container div { /* 1,1,1 */ }
.container div { /* 0,1,1 */ }
div { /* 0,0,1 */ }

2. :nth-child(n) 和 :nth-of-type(n) 的区别？

• :nth-child(n): 选择第n个子元素，不考虑元素类型
• :nth-of-type(n): 选择第n个指定类型的子元素

li:nth-child(2) { /* 第2个子元素，必须是li */ }
li:nth-of-type(2) { /* 第2个li元素 */ }

3. ::before 和 :before 的区别？

• ::before: CSS3伪元素语法（推荐）
• :before: CSS2伪元素语法（向后兼容）

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

4. 如何提高CSS选择器的性能？

• 避免使用通配符选择器
• 避免使用深层嵌套选择器
• 使用类选择器代替标签选择器
• 避免使用属性选择器进行正则匹配

/* 好的选择器 */
.button {
  color: blue;
}

/* 不好的选择器 */
div ul li a span {
  color: blue;
}

5. :not() 伪类的作用？

:not() 伪类用于选择不匹配指定选择器的元素。

:not(.active) {
  opacity: 0.5;
}

input:not([type="submit"]) {
  width: 200px;
}

通过理解CSS选择器的各种类型和优先级规则，可以编写更加高效和可维护的CSS代码。