在前端开发中，我们经常需要使用CSS来进行样式设计和布局。而CSS样式中最基本的元素是选择器，其中包括了tagname节点名和class选择器。虽然这两种选择器都能够实现样式的定义，但它们之间还是存在一些区别的。
tagname节点名选择器
tagname节点名选择器是指通过HTML标签名称来选择元素并对其应用样式。例如：
- - ------ ---- -
这个样式规则会将所有<p>标签的文字颜色设置为红色。
优点
- 易于理解：使用tagname选择器非常直观，只需要知道要选取的HTML标签名称即可。
- 代码简洁：使用tagname选择器可以避免重复编写类似的样式规则。
缺点
- 局限性：tagname选择器只能按照标签名称来选择元素，无法根据元素的其他属性进行选择。
- 不够精确：如果同一页面中存在多个相同标签名称的元素，那么这些元素都会被应用该样式规则。
Class选择器
Class选择器是指通过HTML中的class属性来选择元素并对其应用样式。例如：
--------- - ------ ----- -
这个样式规则会将所有带有class="my-class"属性的元素文字颜色设置为蓝色。
优点
- 精确性高：使用class选择器可以通过给特定元素添加class来精确地选取需要应用该样式规则的元素。
- 可扩展性强：使用class选择器可以在不改变HTML结构的情况下，为元素添加或删除样式。
缺点
- 学习成本高：需要对HTML和CSS的语法有一定的了解，以便正确地使用class选择器。
- 代码量大：如果页面中有大量相似但又不完全一样的样式需求，那么可能需要编写很多class选择器。
如何选择
在选择使用tagname节点名还是Class选择器时，应根据具体的需求进行选择。通常来说，如果只需要简单的样式定义，而且元素的数量比较少，那么tagname选择器是一个更好的选择。但如果需要更加复杂的样式定义，或者元素数量比较多，那么就应该使用class选择器。
此外，我们也可以同时使用两种选择器来实现不同层次的样式定义。例如：
--- - - ------ ---- - --------- - ------------ ----- -
这个样式规则会将所有<p>标签文字设置为红色，但仅将带有class="my-class"属性的元素文字加粗。
总之，选择器的使用应该根据具体情况进行选择和搭配。
示例代码如下：
---- ----------------- ---------------------------------- ----------------------------------- ------ ----------------
--------- - ------ ---- - - - ---------- ----- -
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10655