Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haizhilin2013 opened this issue Aug 6, 2019 · 5 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the css css label Aug 6, 2019
@ghost
Copy link

ghost commented Aug 7, 2019

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

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

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

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

@nowherebutup
Copy link

nowherebutup commented Aug 7, 2019

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

@LinStan
Copy link

LinStan commented Aug 7, 2019

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

@EragonBubble
Copy link

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

优先级 id》类》标签

@Konata9
Copy link

Konata9 commented Aug 19, 2019

三者的权重不同,都可以作为 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
Labels
css css
Projects
None yet
Development

No branches or pull requests

5 participants