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垂直手风琴菜单
Jun 28 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 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下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
vue父子组件通信的高级用法示例
2019/08/29 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python中查看变量内存地址的方法
2015/05/05 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
python daemon守护进程实现
2016/08/27 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
管理科学大学生求职信
2013/11/13 职场文书
应届生自我鉴定
2013/12/11 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
创业计划书之餐饮
2019/09/02 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL