HTML5----scoped属性
2014-04-22 09:38
169 查看
scoped。
style标记上新出现的这个
scoped属性可以让CSS样式只对局部元素生效,具体说,就是存放这段
style样式的元素的子元素生效
<head> <style> .blue{ color:blue;} .yellow{ color:yellow;} .red{ color:red;} </style> </head>以下是传传统写法
跟平常的样式不一样的唯一地方就是新加了一个
scoped属性
<div class="blue"> blue <div class="yellow"> yellow <div class="red"> red <div>CCC</div> <style scoped> .red{ color:#000;} div{ color:#CCC;} </style> </div> </div> </div>
具有
scoped属性的样式只会应用到当前元素和其子元素。Inline样式仍然比
scoped样式优先级高,所以,最好避免使用inline样式
<style scoped> @media only screen and (max-width : 1000px) { div { background: #666; } } </style>
功能:创作模板的,或CMS用户,或某些无法操作整个样式文件的开发人员。
浏览器不支持这个属性的,在这种时候,你也许需要使用jQuery插件来弥补
相关文章推荐
- HTML5中的Scoped属性使用实例
- 转载--HTML5中的Scoped属性使用实例
- HTML5 Audio/Video 标签,属性,方法,事件汇总
- 文本框里面的提醒 属性(html5)
- HTML5元素、属性和格式化
- HTML5--form表单属性
- Html5的placeholder属性(IE兼容)实现代码
- jQuery 操作 html5 data-* 属性
- HTML5全局属性汇总
- HTML5和css3超实用的新属性集合
- HTML5时代看css3新增属性
- HTML5中表单元素常用的属性设置
- HTML5的新的表单属性
- HTML5属性解释与规定
- HTML5的Video标签的属性,方法和事件汇总
- html5的新增元素及其属性
- (转)html5 Placeholder属性兼容IE6、7方法
- Firefox17开始支持HTML5特性——iFrame的Sandbox属性
- HTML5全局属性汇总
- HTML5表单新增元素与属性