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 相关文章推荐
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 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
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
javascript preload&amp;lazy load
2010/05/13 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
python3图片转换二进制存入mysql
2013/12/06 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
ipython和python区别详解
2019/06/26 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
python 发送json数据操作实例分析
2019/10/15 Python
Python3实现飞机大战游戏
2020/04/24 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
致全体运动员广播稿
2014/02/01 职场文书
我爱我家教学反思
2014/05/01 职场文书
升职演讲稿范文
2014/05/23 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
神龙架导游词
2015/02/11 职场文书
员工自我工作评价
2015/03/06 职场文书
任命通知范文
2015/04/21 职场文书
功夫熊猫观后感
2015/06/10 职场文书
致运动员加油稿
2015/07/21 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android