CSS 选择器

CSS 选择器 用于选择您要设置样式的元素。选择器是 CSS 规则集的一部分。CSS 选择器根据 id、class、类型、属性等来选择 HTML 元素。

CSS 中有几种不同类型的选择器。

1. CSS Element Selector
2. CSS Id 选择器
3. CSS Class Selector
4. CSS 通配符选择器
5. CSS 分组选择器

1) CSS 元素选择器

元素选择器通过名称选择 HTML 元素。

输出

This style will be applied on every paragraph.
			
Me too!
			
And me!

2) CSS Id 选择器

id 选择器选择 HTML 元素的 id 属性来选择特定元素。id 在页面内始终是唯一的，因此它被选中来选择一个单一的、唯一的元素。

它以井号 (#) 开头，后跟元素的 id。

让我们以 id 为“para1”的例子来说明。

输出

Hello tpointtech.com
			
This paragraph will not be affected.

3) CSS 类选择器

类选择器选择具有特定 class 属性的 HTML 元素。它与句点字符 .（句点符号）后面跟着类名一起使用。

注意：类名不应以数字开头。

让我们以类名为“center”的例子来说明。

输出

This heading is blue and center-aligned.
			
This paragraph is blue and center-aligned.

特定元素的 CSS 类选择器

如果您想指定只有一个特定的 HTML 元素应该受到影响，那么您应该在类选择器中使用元素名称。

让我们看一个示例。

输出

This heading is not affected
This paragraph is blue and center-aligned.

4) CSS 通配符选择器

通配符选择器用作通配符。它选择页面上的所有元素。

输出

This is heading
			
This style will be applied on every paragraph.
			
Me too!
			
And me!

5) CSS 分组选择器

分组选择器用于选择具有相同样式定义的元素。

分组选择器用于最小化代码。逗号用于分隔分组中的每个选择器。

让我们看看没有分组选择器的 CSS 代码。

如您所见，您需要为所有元素定义 CSS 属性。它可以按以下方式分组：

让我们看看 CSS 分组选择器的完整示例。

输出

Hello tpointtech.com
			
Hello tpointtech.com (In smaller font)
			
This is a paragraph.