css教程

css选择器

CSS选择器是CSS（层叠样式表）中的核心概念之一，它允许你选择并应用样式到HTML文档中的特定元素。CSS选择器是一种强大的工具，可以帮助你实现丰富多彩的网页设计，提高用户体验。在这篇文章中，我们将详细介绍CSS选择器的各种类型及其应用场景。

一、通配符选择器（*）

通配符选择器可以匹配HTML文档中的所有元素。它的语法很简单，只有一个星号（*）。通配符选择器通常用于为整个网页设置默认样式。例如：

* {
  margin: 0;
  padding: 0;
}

这个例子中，为所有元素设置了外边距和内边距。

元素选择器根据元素的标签名称来选择对应的元素。它的语法是元素名称，例如：“p”、“div”、“img”等。当你想要为特定类型的元素设置样式时，可以使用元素选择器。例如：

p {
  font-family: Arial, sans-serif;
}

这个例子中，为所有的<p>标签设置了字体家族。

类选择器根据元素拥有的类属性值来选择元素。它的语法是点号（.）加上类名称。在HTML中，可以通过为元素添加类属性来实现样式的高级应用。例如：

.blue-text {
  color: blue;
}

这个例子中，为拥有blue-text类属性的元素设置了文本颜色。

ID选择器根据元素拥有的ID属性值来选择元素。它的语法是井号（#）加上ID名称。ID选择器具有更高的特定性，可以精确地选择某个唯一的元素。例如：

#my-header {
  background-color: lightblue;
}

这个例子中，为拥有my-header ID属性的元素设置了背景颜色。

属性选择器根据元素拥有的属性及其值来选择元素。有以下五种属性选择器：

1. 拥有某个属性的元素：[attribute]

2. 拥有某个属性且属性值等于某个值的元素：[attribute=value]

3. 拥有某个属性且属性值以某个字符串开头的元素：[attribute^=value]

4. 拥有某个属性且属性值以某个字符串结尾的元素：[attribute$=value]

5. 拥有某个属性且属性值包含某个字符串的元素：[attribute*=value]

例如：

/* 选择拥有src属性的img元素 */
img[src] {
  border: 2px solid green;
}

/* 选择src属性值为"example.jpg"的img元素 */
img[src="example.jpg"] {
  border-radius: 50%;
}

伪类选择器允许你根据元素的状态或特定条件来选择元素。例如：

1. 当鼠标悬停在元素上时：[hover]

2. 当元素获得焦点时：[focus]

3. 当元素处于活动状态时：[active]

4. 当链接已被访问过时：[visited]

5. 当链接未被访问过时：[link]

此外，还有以下伪类选择器：

1. 选择第一个子元素：[first-child]

2. 选择最后一个子元素：[last-child]

3. 选择第n个子元素：[nth-child]

4. 选择倒数第n个子元素：[nth-last-child]

5. 选择第一个类型相同的子元素：[first-of-type]

6. 选择最后一个类型相同的子元素：[last-of-type]

7. 选择第n个类型相同的子元素：[nth-of-type]

8. 选择倒数第n个类型相同的子元素：[nth-last