1.背景介绍
HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。 HTML页面中的元素就是通过CSS选择器进行控制的。本次讲的id和Class就是id选 择器和类选择器。
2.知识剖析
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
id 选择器和派生选择器 在现代布局中,id 选择器常常用于建立派生选择器。
一个选择器,多种用法 即使被标注为 sidebar 的元素只能在文档中出现一次,这个 id 选择器作为派生选择器也可以被使用很多次
单独的选择器 id 选择器即使不被用来创建派生选择器,它也可以独立发挥作用
ID是一个标签,用于区分不同结构和内容,就好像两个同样名字的人在无屋子里面,就会发生混淆,从概念上面来说ID是先找到结构/内容,再给它定义样式的
class 属性大多数时候用于指向样式表中的类(class)。不过,也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。 class 属性不能在以下 HTML 元素中使用:base, head, html, meta, param, script, style 以及 title。 class前面前缀“.”,class可以多次使用 通过document.getElementsByClassName('ClassName')获取; class 不兼容IE6,7,8 class,是一个样式,可以套用在任何结构和内容上面。就像一件衣服,class是先定义好一种样式,在套多个结构/内容 id是一对一的,class是一对多的,id只能调用一次,class可以重复调用。id的权值也要大于class, 类的灵活性是非常强大的,但是有些新手会过度使用或滥用。css新手几乎在所有的东西上面都加上类,从而师徒更加精确地控制 他们的样式。
3.常见问题
ID和CLASS的优先级
4.解决方案
通过继承来的属性 id 的优先级高于 class CSS的优先级顺序: tag中的style > id > class > 继承的属性 一个元素同时应用多个class,后定义的优先(即近者优先),加上!important者最优先!
总结
在一般情况下: 我们利用class来为元素添加样式----css 我们利用id来为元素添加行为----js/jQuery
3.常见问题
总结
在一般情况下: 我们利用class来为元素添加样式----css 我们利用id来为元素添加行为----js/jQuery
5.编码实战
6.扩展思考
同一页面使用相同的ID会怎样?
7.参考文献
参考一:w3c
参考二:知乎
8.更多讨论
如何正确使用ID和CLASS?
问题:
1.同一个页面使用相同的ID会怎么样?
答:不能通过w3迟到校验。在页面显示上,目前的浏览器HIA都允许你犯这个错误,用多个相同ID“一般情况下”也能正常显示。单当你需要用js通过id来控制这个id,那就会出现错误。
2.如何正确使用ID和CLASS?
答:css只用class来写并有专门的class通用和私有模块命名,id具有唯一性且优先级太高只作为j操作dom的挂钩全部不添加样式,如果使用jp或zepto的话, 操作的class类名一般也不加样式,镇部分的class命名和id一样js来制定。这样桌比较合适大型,多人维护而且需要长期达代的项目css的class类名和js操作id、class类完全分离,这样产品的ui或者产品交互逻辑变动二者互不影响,易维护。
3.ID和CLASS的优先级
答:通过继承来的属性 id 的优先级高于 class CSS的优先级顺序: tag中的style > id > class > 继承的属性 一个元素同时应用多个class,后定义的优先(即近者优先),加上!important者最优先!