html元素中class属性值多个空格分格是什么意思?
2016-07-06 08:43
405 查看
即指定多个class,这是bootstrap常干的事,比如
请问,这两个class之间的关系是什么,二者的优先级是怎样的?
我自己定义了一个class ,加在后面,但没起作用,当然,如果写到style里去是可以的。
你说的没错,就是指定多个class的意思,在HTML的层面上说的话,这样指定的class是同级的。同级的class需要看CSS文件的先后次序,后加载的css会覆盖前面加载的css。写到style的话因为是最后解析的所以是最高的一个优先级。
前面的答案,都是合理的。但依我看,这么干侧重在于 CSS 的模块化设计。
像 @Aivier 所说的,它还有可能有 alert-warning,alert-success 等等,假如我们每个分开写的话,小页面没什么问题,但是它在一个大项目里,就显得很笨拙,增加了开发的时间成本。所以,人们为了提高代码的重用性,把类似的结构或功能等等的部件,划为一个模块。然后把它们的共性提炼出来,也就是这段代码前的
多个class你可以理解成一对多的意思,说的是这一块有多个class样式。 css的优先级考虑的地方还算比较多,你这里使用style毫无疑问是优先级最高的,任何情况想style的优先级都是最高的。其次是ID和各种选择器和继承,其实单独一个class的优先级很低的。
同时指定了多个CSS样式,这里面的alert-info还可以换成alert-warning,alert-success等,这样分开多个class可以减少重复的代码,alert中的样式只写一次即可,而不用alert-warning,alert-info中都重复一遍
你自己写的样式可以在分号前增加 !important 来强制应用样式
<div class="alert alert-info">
请问,这两个class之间的关系是什么,二者的优先级是怎样的?
我自己定义了一个class ,加在后面,但没起作用,当然,如果写到style里去是可以的。
你说的没错,就是指定多个class的意思,在HTML的层面上说的话,这样指定的class是同级的。同级的class需要看CSS文件的先后次序,后加载的css会覆盖前面加载的css。写到style的话因为是最后解析的所以是最高的一个优先级。
前面的答案,都是合理的。但依我看,这么干侧重在于 CSS 的模块化设计。
.alert是基础公共层,
.alert-info是个表现扩展层。
像 @Aivier 所说的,它还有可能有 alert-warning,alert-success 等等,假如我们每个分开写的话,小页面没什么问题,但是它在一个大项目里,就显得很笨拙,增加了开发的时间成本。所以,人们为了提高代码的重用性,把类似的结构或功能等等的部件,划为一个模块。然后把它们的共性提炼出来,也就是这段代码前的
.alert,再分开写它们具体的表现样式,即
.alert-info。
多个class你可以理解成一对多的意思,说的是这一块有多个class样式。 css的优先级考虑的地方还算比较多,你这里使用style毫无疑问是优先级最高的,任何情况想style的优先级都是最高的。其次是ID和各种选择器和继承,其实单独一个class的优先级很低的。
<div class="alert alert-info">
同时指定了多个CSS样式,这里面的alert-info还可以换成alert-warning,alert-success等,这样分开多个class可以减少重复的代码,alert中的样式只写一次即可,而不用alert-warning,alert-info中都重复一遍
你自己写的样式可以在分号前增加 !important 来强制应用样式
相关文章推荐
- HTML学习笔记(上)
- 页内跳转
- HTML data-*自定义属性
- 服务器控件类与HTML标签之间的对应关系
- HTML-元素&属性
- html 语法
- XHTML 表单
- html中清除浮动问题
- HTML--比较实用的小例子
- HTML笔记(元素分类)
- canvas底部有空白部分
- html 页面清浏览器缓存
- htmlparser API
- kindeditor html代码过滤 首发
- html form表单reset
- 在编写html文件当中submit 和 button有什么区别
- 常见浏览器兼容性问题与解决方案
- HTML过滤器 - XSS Fucker 20160701
- HTML特殊符号对照表
- 在Web.xml 内配置浏览器解析html的编码格式