详解CSS中的基本选择器-猿码集

1. 什么是CSS选择器?

CSS选择器是CSS语言中的基本语法, 用于选择HTML中的元素. 在CSS中, 选择器和声明块组成了一个规则(rule).

2. 基本选择器

2.1 元素选择器

元素选择器是CSS中最常用的选择器, 它通过HTML标签名来选择元素.


/* Example: 文本颜色为红色 */
p {
  color: red;
}

重点: 元素选择器可以选择HTML文档中所有的一个元素

2.2 类选择器

类选择器通过HTML元素的class属性值来选择元素。


/* Example: 文本颜色为蓝色 */
.blue {
  color: blue;
}

为HTML元素添加类名:


<p class="blue">这段文本的颜色是蓝色的</p>

重点: 类选择器可以选择HTML文档中多个元素。

2.3 ID选择器

ID选择器通过HTML元素的ID属性值来选择元素.


/* Example: 文本颜色为绿色 */
#green {
  color: green;
}

为HTML元素添加ID:


<p id="green">这段文本的颜色是绿色的</p>

重点: ID选择器可以选择HTML文档中唯一一个元素.

2.4 通配符选择器

通配符选择器可以选择HTML文档中所有的元素, 用"*"表示.


/* Example: 文本字体为italic */
* {
  font-style: italic;
}

重点: 通配符选择器会应用CSS声明到每个HTML元素上.

2.5 属性选择器

属性选择器可以选择具有特定属性的HTML元素。


/* Example: 所有有title属性的元素文本颜色为橙色 */
*[title] {
  color: orange;
}
/* Example: 类型为button的button元素背景颜色为灰色 */
button[type="button"] {
  background-color: grey;
}

重点: 可以根据元素的其他属性来选择元素.

2.6 伪类选择器

伪类选择器可以选择不在HTML文档中的HTML元素(如链接的状态等)。


/* Example: 鼠标悬浮链接时, 文本颜色为红色 */
a:hover {
  color: red;
}

重点: 伪类选择器可以根据元素的动态状态来选择元素.

2.7 伪元素选择器

伪元素选择器允许您在HTML元素中插入虚拟的内容.


/* Example: 为每个h2元素前添加斜杠 */
h2::before {
  content: "/";
}
/* Example: 为每个h2元素后添加斜杠 */
h2::after {
  content: "/";
}

重点: 伪元素可以在HTML元素中添加虚拟的内容, 操作HTML元素的内容.

3. 总结

CSS中有多种基本选择器, 基本选择器常用于改变HTML元素的样式. 通过了解不同的选择器, 您将有更多的自由来改变HTML元素的外观和外观.

详解CSS中的基本选择器