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 相关文章推荐
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
关于Intype一些小问题的解决办法
2008/03/28 PHP
PHP抽象类 介绍
2012/06/13 PHP
php7下的filesize函数
2019/09/30 PHP
MSN消息提示类
2006/09/05 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
八大排序算法的Python实现
2021/01/28 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
python和opencv实现抠图
2018/07/18 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python实现维吉尼亚算法
2019/03/20 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Django admin组件的使用
2020/10/24 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
商场消防管理制度
2014/01/12 职场文书
致200米运动员广播稿
2014/02/06 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
活动总结模板大全
2015/05/11 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
详解Python flask的前后端交互
2022/03/31 Python