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 相关文章推荐
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 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中遍历stdclass object的实现代码
2011/06/09 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
TypeScript入门-接口
2017/03/30 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
感恩母亲节活动方案
2014/03/04 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
教师节横幅标语
2014/10/08 职场文书
幼儿园感谢信
2015/01/21 职场文书
技术员个人工作总结
2015/03/03 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS