HTML5中的Scoped属性使用实例


Posted in HTML / CSS onApril 23, 2014

特别的,有一个新的属性,它能让我们控制多个元素的属性,就是:scoped。style标记上新出现的这个scoped属性可以让CSS样式只对局部元素生效,具体说,就是存放这段style样式的元素的子元素生效,跟平常的样式不一样的唯一地方就是新加了一个scoped属性:

复制代码
代码如下:

<style scoped>
/* styles go here */
</style>

具有scoped属性的样式只会应用到当前元素和其子元素。Inline样式仍然比scoped样式优先级高,所以,最好避免使用inline样式,下面是将几种样式混合到一起比较它们的作用效率范围:

复制代码
代码如下:

<div class="democontain lazy ">
<style scoped>
div { border: 1px solid green; margin-bottom: 20px; min-height: 40px; }
.democontain { background: #f8f8f8; }
</style>
<div></div>
<div style="border-color: pink;">
<style scoped>
div { background: lightblue; border: 1px solid blue; }
</style>
<div></div>
</div>
<div></div>
</div>

在scoped样式里可以使用任何合法的CSS样式标记,比如媒体查询,就像下面这样:

复制代码
代码如下:

<style scoped>
@media only screen and (max-width : 1024px) {
div { background: #000; }
}
</style>

这个新出现的scoped属性是非常有用的功能,尤其对那些创作模板的,或CMS用户,或某些无法操作整个样式文件的开发人员。但需要注意的是,有些老式的浏览器上不支持这个属性的,在这种时候,你也许需要使用jQuery插件(https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin)来弥补这种问题。

HTML / CSS 相关文章推荐
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 #HTML / CSS
html5菜单折纸效果
Apr 22 #HTML / CSS
html5读取本地文件示例代码
Apr 22 #HTML / CSS
使用html5制作loading图的示例
Apr 14 #HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 #HTML / CSS
html5图片上传预览示例分享
Apr 14 #HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 #HTML / CSS
You might like
第七章 php自定义函数实现代码
2011/12/30 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
ES6实现图片切换特效代码
2020/01/14 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
Python Web框架Tornado运行和部署
2020/10/19 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
python中字符串的操作方法大全
2018/06/03 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
介绍一下Linux中的链接
2016/05/28 面试题
市场部专员岗位职责
2013/11/30 职场文书
高三语文教学反思
2014/01/15 职场文书
教书育人演讲稿
2014/09/11 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
刑事撤诉申请书
2015/05/18 职场文书
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android