CSS选择器

元素选择器

/* 使用元素选择器为所有段落元素应用样式 */
p {
  color: blue;
  font-size: 16px;
  text-align: center;
  margin: 10px;
  padding: 5px;
  background-color: #f0f0f0;
}

类选择器

/* 使用类选择器为具有类名 "important" 的元素应用样式 */
.important {
  font-weight: bold;
  color: red;
  background-color: yellow;
}

ID选择器

/* 使用ID选择器为具有ID "special-paragraph" 的元素应用样式 */
#special-paragraph {
  font-weight: bold;
  color: blue;
  background-color: yellow;
}

后代选择器

/* 使用后代选择器为容器内的段落应用样式 */
.container p {
  font-weight: bold;
  color: blue;
}

/* 使用后代选择器为容器内的列表项应用样式 */
.container ul li {
  list-style-type: square;
}

子选择器

/* 使用子选择器为父元素内的直接子列表项应用样式 */
.parent > li {
  font-weight: bold;
  color: blue;
}

/* 使用子选择器为子元素内的直接子列表项应用样式 */
.child > li {
  list-style-type: square;
}

通配符选择器

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

属性选择器

a[href="https://www.example.com"] {
  text-decoration: none;
  color: #0077b5;
}

伪类选择器

1. :hover 伪类选择器：选择鼠标悬停在元素上的状态。

a:hover {
  color: red;
  text-decoration: underline;
}

2. :visited 伪类选择器：选择已访问过的链接。

a:visited {
  color: purple;
}

3. :first-child 伪类选择器：选择元素的第一个子元素。

li:first-child {
  font-weight: bold;
}

伪元素选择器

1. ::before 伪元素选择器：在元素的前面插入内容。

p::before {
  content: ">>";
  color: blue;
}

2. ::after 伪元素选择器：在元素的后面插入内容。

button::after {
  content: " (Click me)";
  color: green;
}

3. ::first-line 伪元素选择器：选择元素的第一行文本。

p::first-line {
  font-weight: bold;
}