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动画技术
Jan 01 HTML / CSS
用纯css3和html制作泡沫对话框实现代码
Mar 21 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 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分页时出现的Fatal error的解决方法
2011/04/18 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
JS常见算法详解
2017/02/28 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
Vue.js实现立体计算器
2020/02/22 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Python阶乘求和的代码详解
2020/02/14 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
Python项目打包成二进制的方法
2020/12/30 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
探矿工程师自荐信
2014/01/24 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
爱国主义电影观后感
2015/06/18 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
Python Flask实现进度条
2022/05/11 Python