Skip to content

[css] 第113天 标签、class和id选择器三者的区别是什么?分别在什么时候用? #1034

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第113天 标签、class和id选择器三者的区别是什么?分别在什么时候用?

Activity

ghost

ghost commented on Aug 7, 2019

@ghost

标签选择器选择标签名称,class 选择器选择 class 属性,id 选择器选择 id 属性。

对于 HTML 元素,class 属性可重,语义上代表元素所属的类别;id 属性不可重,语义上代表元素的标识符。

标签选择器的格式为 tagname { ... },class 选择器的格式为 .class-name { ... },id 选择器的格式为 #identifier { ... }

如果想让某种标签的全部元素都具有某种样式(e.g. 去除 <a> 的下划线),就用标签选择器;如果想让特定的一类/一组元素具有某种样式,那么将这些元素加上特定的 class 并使用 class 选择器。如果想让特定一个元素具有某种样式,那么使用 id 选择器。

nowherebutup

nowherebutup commented on Aug 7, 2019

@nowherebutup
  • 重复: 标签,类选择器,
    id选择器不可重复
  • 优先级: id > 类 > 标签
LinStan

LinStan commented on Aug 7, 2019

@LinStan

标签选择器:tag{} 选取对应的标签例如 a span div
class选择器:.class-name{} 选取对应class-name的元素
id选择器:#id-name{} 选取对应id的元素
其中id是具有唯一性的。
三者优先级为 id>类>标签
因此一般可以用标签选择器添加该标签的通用样式,类选择器对样式进一步细化,id选择器针对某几个需要特殊处理的元素添加单独的样式。

EragonBubble

EragonBubble commented on Aug 7, 2019

@EragonBubble

标签选择器: 选择所有相同的dom节点名称的节点,可重复。
ID选择器:选择唯一id的节点,唯一。
类选择器:选择所有相同的类名的节点,可重复。

优先级 id》类》标签

Konata9

Konata9 commented on Aug 19, 2019

@Konata9

三者的权重不同,都可以作为 CSS 的选择器使用。id > class > tag。

不过在一般的使用中,id 会留给 JavaScript 使用,用来进行 DOM 的操作并且 id 不允许重复。classtag 一般用在 CSS 上,用来进行样式的编辑。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@Konata9@EragonBubble@LinStan@nowherebutup

        Issue actions

          [css] 第113天 标签、class和id选择器三者的区别是什么?分别在什么时候用? · Issue #1034 · haizlin/fe-interview