首页
学习
活动
专区
工具
TVP
发布

在前端开发中,什么时候使用CSS类和ID

本节课大纲

指令名称

有一些标签id在网页中是经常见到的,例如,container (or wrapper), header, content, sidebar, footer.这些标签id都是很好的例子,因为它们的名字就能知道其作用,它们申明的目的是为了辨别div或者其他标签元素。

id和 class 最好可以用来表示特定的意思. 诀窍就是去选择一个任何时候都能代表这个元素意思的名字

给出的建议,例如, 你有一个标签代表的是当天的特价,你决定把它字体标红,你可以把元素的名字命名为“special” 或者是“red”

"special" 应该是好的选择. 时间的推移, 你的颜色的方案可能会改变,然而"red"就会使人疑惑,但是如果这个名字是"special" 就能让你很好的辨认出这个标签的目的

确保你选择的这个名字有意义的,当你需要重新修改样式可能这些样式已经半年或一年没有碰了。这是一个好的选择

什么时候使用 Class 或 ID

在一个页面里,每个ID必须是唯一的,例如:在一个页面上只能有一个div使用某一个ID,但一个类(class)能在页面中被使用多次。例如:你可以有一些图片在页面上一起使用 "leftfloat" 或 "rightfloat" 作为这些图片的类(class)。

第一步基于信息,你可能会想应该使用大量的使用类(class)和少量的ID.恰好相反,为了精简标记你需要尽可能少用类(class)。在类(class)上使用大数字命名或命名成名称(这里的名称指绝对名称,如:注册页面中的用户名 username、密码 password)这都是不好的习惯,类(class)应该作为元素的分类来命名。

类(class)在有时是必须的,但有时给元素(element)指定一个ID然后使用子元素选择器(descendantselector)指向那个目标元素的子元素比为每一个子元素分配一个类(class)的做法要少一些代码。

例如, 假设在一个列表上有一些链接。你可以在列表里分配一个类(class)到每个单独的链接来样式化这些链接。或者分配一个ID在这个列表容器(如:UL或OL元素)并使用子元素选择器(descendant selector)写一个规则。假设你给UL分配一个ID为 "subnav"。这个子元素选择器(descendant selector) 将样式化subnav下面的链接。

如下所示:#subnav a:link

在一些地方里某些东西(这里应该是指指定重复的ID)频繁出现在同一个页面里会导致子元素选择器(descendant selector)不工作,类(class)的话就可以完好使用。我已经举例提醒过,应使用一个类来使一个图片向左还是向右浮动到页面的任何地方。

假设你的目录中每一个条目有几个段落的描述,但你又想段落中的其中一个是不同的形式。假如它是介绍(introductory)段落你能分配它一个类(class)名为 "intro"。但如它是给用户的表扬信(testimonials),你可以分配它一个类(class)名为 "testimonial",然后你可以创建一个类 .intro 或 .testimonial 的样式,那些段落将会被区分成不同的。

注意

类与ID名可以都写成小写形式(如,#subnav)或驼峰命名方式(如,#subNav)。如果你选择驼峰命名方式,请确保你输入正确的HTML标记,否则浏览器将无法识别你的CSS规则。

在类或者ID名称中不能有空格。使用下划线代替空格是可行的。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180309A0JWEP00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券