<style>標籤的scoped屬性用法簡單介紹

admin發表於2017-02-11

關於<style>標籤的用法大家一定都不會陌生，下面先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<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屬性。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<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>標籤的作用區域。

相關文章