📌  相关文章
📜  CCS Class v/s Id

📅  最后修改于: 2020-11-06 01:08:55             🧑  作者: Mango

Class v/s Id

CSS中的选择器是CSS规则集的一部分，用于选择我们要设置样式的内容。 id和class都是CSS元素选择器，用于根据其分配的名称来标识元素。 CSS id和class选择器是CSS中最常用的选择器。

在使用选择器的过程中，有时id和class之间会发生混淆。他们两个都没有任何默认样式信息；他们需要CSS才能选择它们并将其应用于样式。尽管两者均用于选择元素，但它们在许多方面彼此不同。

id和class之间的区别如下表所示。

Class Id
We can apply a class to various elements so that it could be numerous times on a single page. The Id is unique in a page, and we can only apply it to one specific element.
The class is assigned to an element and its name starts with “.” followed by the name of the class. The name of the Id starts with the “#” symbol followed by a unique id name.
We can attach multiple class selectors to an element. We can attach only one ID selector to an element.
Syntax:
#id{
// declarations of CSS
}		 Syntax:
.class{
// declarations of CSS
}

让我们分别讨论id和class。

ID选择器

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

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

id选择器的示例如下。

例

在此示例中，我们选择ID为“ para”的元素。








 Welcome to the Javatpoint.com 


This paragraph will be affected.


This paragraph will not be affected.

输出量

类选择器

类选择器用于选择具有特定类属性的HTML元素。它用句点字符书写。 (句号)，后跟类名。

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

类选择器的示例如下。

例

在此示例中，我们选择具有“示例”类的元素。








This heading is blue and center-aligned.


This paragraph is blue and center-aligned.

输出量

特定元素的CSS类选择器

我们也可以使用类选择器来设置特定元素的样式，无论它是否应用于其他元素。

如果需要指定只影响一个特定的HTML元素，则必须将元素名称与类选择器一起使用。

从以下示例中可以清楚地看出。

例








This heading is not effected.


This paragraph is blue and center-aligned.

输出量

还有另一个例子，我们在同一个元素上应用多个类。让我们看一下相同的例子。

例

在此示例中，我们在段落元素上使用两个类(example和para)，并使用这两个类对段落进行样式设置。

  
  
  
  
  
  

This heading is red and center-aligned.
  

This paragraph is red and center-aligned with a font-family "Lucida Calligraphy" and text-shadow.

输出量