关于<style>标签的用法大家一定都不会陌生，下面先看一段代码实例:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
" utf-8"
>
<
title
>蚂蚁部落</
title
>
<
style
type
=
"text/css"
>
h1{color:hotpink;}
p{
background:red;
width:150px;
height:150px;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"box"
>
<
h1
>蚂蚁部落标题</
h1
>
<
p
>蚂蚁部落</
p
>
</
div
>
<
p
>分享互助</
p
>
</
body
>
</
html
>
|
以上代码就是一个典型的<style>标签的应用，应该没有任何异议，下面就在此标签的应用scoped属性。
代码如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
" utf-8"
>
<
title
>蚂蚁部落</
title
>
</
head
>
<
body
>
<
div
id
=
"box"
>
<
style
scoped>
h1{color:hotpink;}
p{
background:red;
width:150px;
height:150px;
}
div{
border:1px solid blue;
}
</
style
>
<
h1
>蚂蚁部落标题</
h1
>
<
p
>蚂蚁部落</
p
>
</
div
>
<
p
>分享互助</
p
>
</
body
>
</
html
>
|
只能够设置<style>标签的父元素和它的兄弟元素的属性，也就是说scoped属性限定了<style>标签的作用区域。
原文发布时间为：2017-2-11
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
