CSS3选择器基本介绍

选择器的作用

CSS选择器用于匹配HTML元素，并为其添加样式。选择器是一种模式匹配的机制，可以选择具有特定属性的HTML元素。理解不同的选择器是用于创建网页的基础。

基本选择器

基本选择器是CSS中最简单的选择器。基本选择器可以根据标签名、类名、ID等对网页中的元素进行选择。

标签选择器

语法如下：

标签名 {
    属性: 值
}

其中，标签名可以是HTML标签，例如p、div、img，也可以是XHTML标签、XML标签等。

示例1：下面的样式将会把所有p标签的文字颜色设置为红色：

p {
    color: red;
}

类选择器

类选择器基于元素的class属性，通过class属性来选择元素，语法如下：

.class {
    属性: 值
}

其中，.class表示类选择器。

示例2：下面的样式将会把所有class属性为important的元素的背景颜色设置为黄色：

.important {
    background-color: yellow;
}

ID选择器

ID选择器基于元素的id属性，通过id属性来选择元素，语法如下：

#id {
    属性: 值
}

其中，#id表示ID选择器。

示例3：下面的样式将会把id属性为header的元素的文字颜色设置为蓝色：

#header {
    color: blue;
}

高级选择器

除了基本选择器，CSS3还有很多高级选择器，例如后代选择器、子元素选择器、相邻兄弟选择器等。

后代选择器

后代选择器基于元素的嵌套关系，通过嵌套关系来选择元素，语法如下：

祖先元素 后代元素 {
    属性: 值
}

其中，祖先元素和后代元素之间用空格隔开。

示例4：下面的样式将会把所有div下的p元素的文字颜色设置为绿色：

div p {
    color: green;
}

子元素选择器

子元素选择器选择元素的直接子元素，语法如下：

父元素 > 子元素 {
    属性: 值
}

其中，父元素和子元素之间用“>”符号隔开。

示例5：下面的样式将会把所有ul元素的直接子元素li的文字颜色设置为黑色：

ul > li {
    color: black;
}

总结

总而言之，选择器是CSS的核心。掌握不同类型的选择器是编写高效CSS代码的秘诀。基本选择器是最常用的选择器，而高级选择器则提供了更多灵活的选择方式，可以使我们更加方便地对网页元素进行样式设置。