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中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
使用CSS设置滚动条样式
Jan 18 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调用三种数据库的方法(2)
2006/10/09 PHP
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
深入解析php中的foreach函数
2013/08/31 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python 解压pkl文件的方法
2018/10/25 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python rstrip()方法实例详解
2018/11/11 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
宠物店的创业计划书范文
2014/01/11 职场文书
护士工作失误检讨书
2014/09/14 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
cf战队宣传语
2015/07/13 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis