CSS3 选择器 基本选择器介绍

1. id选择器

id选择器通过元素的id属性来选择元素。它以"#id"的格式表示。

示例：

#myElement {
   color: red;
}

上述例子中，选择器"#myElement"会选择具有id属性值为"myElement"的元素，并将其文本颜色设置为红色。

2. 类选择器

类选择器通过元素的class属性来选择元素。它以".class"的格式表示。

示例：

.myClass {
   font-size: 16px;
}

上述例子中，选择器".myClass"会选择具有class属性值为"myClass"的元素，并将其字体大小设置为16像素。

3. 元素选择器

元素选择器通过元素的标签名来选择元素。

示例：

h1 {
   text-align: center;
}

上述例子中，选择器"h1"会选择所有的"h1"标签，并将其文本居中对齐。

4. 属性选择器

属性选择器通过元素的属性来选择元素。它以"[属性名=属性值]"的格式表示。

示例：

input[type="text"] {
   border: 1px solid gray;
}

上述例子中，选择器"input[type="text"]"会选择所有"input"元素中type属性为"text"的元素，并将其边框设置为1像素的灰色实线。

5. 伪类选择器

伪类选择器用于选择元素的特殊状态或位置。它以":"开头表示。

示例：

a:hover {
   color: blue;
}

上述例子中，选择器"a:hover"会选择鼠标悬停在链接上时的状态，并将链接文本颜色设置为蓝色。

以上介绍了CSS3的基本选择器，通过这些选择器可以根据需要精确地选择网页中的元素。在实际开发过程中，我们可以根据元素的id、class、标签名、属性及特殊状态来应用相应的样式效果，从而实现更加个性化的网页设计。