tagname节点名和Class选择器的区别

在前端开发中，我们经常需要使用CSS来进行样式设计和布局。而CSS样式中最基本的元素是选择器，其中包括了tagname节点名和class选择器。虽然这两种选择器都能够实现样式的定义，但它们之间还是存在一些区别的。

tagname节点名选择器

tagname节点名选择器是指通过HTML标签名称来选择元素并对其应用样式。例如：

p {
  color: red;
}

这个样式规则会将所有<p>标签的文字颜色设置为红色。

优点

• 易于理解：使用tagname选择器非常直观，只需要知道要选取的HTML标签名称即可。
• 代码简洁：使用tagname选择器可以避免重复编写类似的样式规则。

缺点

• 局限性：tagname选择器只能按照标签名称来选择元素，无法根据元素的其他属性进行选择。
• 不够精确：如果同一页面中存在多个相同标签名称的元素，那么这些元素都会被应用该样式规则。

Class选择器

Class选择器是指通过HTML中的class属性来选择元素并对其应用样式。例如：

.my-class {
  color: blue;
}

这个样式规则会将所有带有class="my-class"属性的元素文字颜色设置为蓝色。

优点

• 精确性高：使用class选择器可以通过给特定元素添加class来精确地选取需要应用该样式规则的元素。
• 可扩展性强：使用class选择器可以在不改变HTML结构的情况下，为元素添加或删除样式。

缺点

• 学习成本高：需要对HTML和CSS的语法有一定的了解，以便正确地使用class选择器。
• 代码量大：如果页面中有大量相似但又不完全一样的样式需求，那么可能需要编写很多class选择器。

如何选择

在选择使用tagname节点名还是Class选择器时，应根据具体的需求进行选择。通常来说，如果只需要简单的样式定义，而且元素的数量比较少，那么tagname选择器是一个更好的选择。但如果需要更加复杂的样式定义，或者元素数量比较多，那么就应该使用class选择器。

此外，我们也可以同时使用两种选择器来实现不同层次的样式定义。例如：

div p {
  color: red;
}

.my-class {
  font-weight: bold;
}

这个样式规则会将所有<p>标签文字设置为红色，但仅将带有class="my-class"属性的元素文字加粗。

总之，选择器的使用应该根据具体情况进行选择和搭配。

示例代码如下：

<div class="my-class">
  <p>这是一个带有class="my-class"属性的段落</p>
  <p>这也是一个带有class="my-class"属性的段落</p>
</div>

<p>这是一个普通的段落</p>

.my-class {
  color: red;
}

p {
  font-size: 16px;
}

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10655