CSS选择器

CSS选择器用于选择要设置样式的内容。选择器是CSS规则集的一部分。 CSS选择器根据其ID，类，类型，属性等选择HTML元素。

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

• CSS元素选择器
• CSS ID选择器
• CSS类选择器
• CSS通用选择器
• CSS组选择器

1)CSS元素选择器

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

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

  

输出：

This style will be applied on every paragraph.

Me too!

And me!

2)CSS ID选择器

id选择器选择HTML元素的id属性以选择特定元素。 id在页面内始终是唯一的，因此可以选择一个唯一的元素。

这是写与散列字符(＃)，随后元件的ID。

让我们以id为“ para1″的示例为例。

Hello Javatpoint.com
This paragraph will not be affected.

  

输出：

And me!

本段不会受到影响。

3)CSS类选择器

类选择器选择具有特定类属性的HTML元素。它使用了一段字符。 (句号)，后跟类名。

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

让我们以“中心”类为例。

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

输出：

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.
 

 

输出：

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!

  

输出：

This is heading

This style will be applied on every paragraph.

Me too!

And me!

5)CSS组选择器

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

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

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

h1 {
    text-align: center;
    color: blue;
}
h2 {
    text-align: center;
    color: blue;
}
p {
    text-align: center;
    color: blue;
}

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

h1,h2,p {
    text-align: center;
    color: blue;
}

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

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

输出：

Hello Javatpoint.com

Hello Javatpoint.com (In smaller font)

This is a paragraph.