<style>标签的scoped属性用法简单介绍

最新推荐文章于 2024-05-16 09:56:09 发布
最新推荐文章于 2024-05-16 09:56:09 发布
阅读量248 收藏
点赞数
原文链接：https://yq.aliyun.com/articles/573419
版权

关于<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" 
          >    
         
 
         
 
          < 
          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属性。
 
 
代码如下:
 
 
 
 
 
  
 
   
 
    
 
        

          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" 
          >    
         
 
         
 
          < 
          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>标签的作用区域。
 
 

 
 

 
 
原文发布时间为：2017-2-11
 
 
本文作者：admin
 
 
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
 
 
 
 
原文链接：<style>标签的scoped属性用法简单介绍
 


                

        

        




    




    

      

        

            

              
                
                  weixin_33994444
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
Vue style里面使用scoped属性并@import引入外部css, 作用域是全局的解决方案

				
			

			

				

					渣渣兔子的博客
				

				

					05-11
					
					3万+
					
				

			

		

		

			
				
。。。

			
		

	



                

              
                



	

		

			

				
					
浅谈关于.vue文件中style的scoped属性

				
			

			

				

					12-29
				

			

		

		

			
				
本文介绍了.vue文件中style的scoped属性以及踩到的坑，具体如下： scoped可以实现style只作用于当前的.vue文件   <template>  <div class=user></div> </template> [removed] [removed] <style lang='less' ...

			
		

	



                


  
              

                


	

		

			

				
					
style标签上的scoped属性

				
			

			

				

					qq_43260366的博客
				

				

					10-22
					
					5260
					
				

			

		

		

			
				
在我们使用第三方插件(eg:vant)的时候，想要修改其中的样式时—>若是我们写在带有scoped的style中时，默认会在选择器上加一个属性，这样就修改不到子元素的身上(无法修改子组件的样式)；答案是不需要的，因为在vue中在打包时会将所有的样式打包到一个css文件中；而在uni-app中会将每个页面打包到一个单独的wxss文件中，因此这样已经保证了该文件的样式不被其他文件干扰了；在使用uni-app时我们使用的是.vue文件进行代码编写的，style标签也存在coped属性。[1]解决1—使用穿透。

			
		

	





	

		

			

				
					
vue ＜style＞标签的scoped 属性

				
			

			

				

					灵活的小胖子
				

				

					08-08
					
					920
					
				

			

		

		

			
				
大家都知道<style> 标签是用来设置浏览器中如何呈现HTML的，也就是设置CSS样式的，但是当我们在<style>标签里加上scope的是什么意思呢？

"scoped" 属性是 HTML 5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。如果使用 "scoped" 属性，那么所规定的样式只能应用到 style 元素的父元素及其子元素。

<style> 标签有 scoped 属性时表示它的样式作用于当...

			
		

	



		

			
		



	

		

			

				
					
Vue中＜style＞标签的scoped属性

					
最新发布

				
			

			

				

					李长渊的博客
				

				

					05-16
					
					377
					
				

			

		

		

			
				
Vue中标签的scoped属性

			
		

	





	

		

			

				
					
style 标签属性 scoped 的作用和原理

				
			

			

				

					weixin_43299180的博客
				

				

					01-22
					
					6328
					
				

			

		

		

			
				
在vue项目里面经常在页面下面的 style 标签上面加上 scoped 属性，对于这个 scoped 属性的了解做一下介绍。
1、作用
当 style 标签里面有 scoped 属性时，它的css只作用于当前组件中的元素。在单页面项目中可以使组件之间互不污染，实现模块化。
2、原理
通过使用postCss来实现转换，给dom增加一个动态属性，然后css属性也额外添加对应的属性来选择该dom，达到该样式只作用于含有该属性的dom，实现组件样式的模块化。
转换前：
<templete>
	<

			
		

	





	

		

			

				
					
vue组件style中scoped的作用

				
			

			

				

					TeFuir__Lv的博客
				

				

					12-15
					
					1566
					
				

			

		

		

			
				
vue组件style中scoped的作用

			
		

	





	

		

			

				
					
浅谈vue中慎用style的scoped属性

				
			

			

				

					08-28
				

			

		

		

			
				
本篇文章主要介绍了浅谈vue中慎用style的scoped属性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
HTML5中的Scoped属性使用实例

				
			

			

				

					09-28
				

			

		

		

			
				
HTML5的变革给我们带来了大量非常有用的新属性，比如placeholder, download, hidden，等等。每一种新属性都给我们带来了对页面元素新的控制方法和控制效力

			
		

	





	

		

			

				
					
style标签里的scoped有什么作用

				
			

			

				

					evendetail的博客
				

				

					12-08
					
					5033
					
				

			

		

		

			
				
scoped

			
		

	





	

		

			

				
					
浅谈Vue的style scoped

					
热门推荐

				
			

			

				

					Jay的博客
				

				

					04-24
					
					1万+
					
				

			

		

		

			
				
style scoped的作用
在使用Vue-Cli 开发时，我们都知道，在组件的<style></style>加上 scoped属性，可以让<style></style>里的样式只在当前组件生效。
那，这是如何实现的呢？
Vue 对 scoped的渲染规则

对于所有的 Vue 组件，只要设置了<style scoped></st...

			
		

	





	

		

			

				
					
Vue框架中style标签的scope和lang属性以及样式穿透

				
			

			

				

					XYQ689的博客
				

				

					03-14
					
					4271
					
				

			

		

		

			
				
在使用vue框架的时候，给style标签添加scoped属性，表示该style标签所包含的样式仅仅作用于当前的vue组件，不会产生样式全局污染的情况，一个应用中所有vue组件都加上该属性，则实现了样式的模块化。


&lt;style scoped&gt;
    /** 组件样式 */
&lt;/style&gt;

实现原理：

1、vue会给每个组件中HTML的DOM节点添加一个组件间不重复...

			
		

	





	

		

			

				
					
【项目小tips】scoped属性的使用

				
			

			

				

					weixin_44337386的博客
				

				

					04-17
					
					3542
					
				

			

		

		

			
				
项目场景：
在做Vue项目的过程中，想要更改Element-ui中轮播图按钮的样式，发现按钮样式只能放在style中，如果放在style scoped中就不会生效。

问题描述
<style>
/*生效*/
.el-carousel__button {
  width: 40px;
  height: 40px;
  background-color: pink;
  border-radius: 20px;
}
</style>

<style scoped>
/*不生

			
		

	





	

		

			

				
					
vue - 深入理解vue中的scoped属性

				
			

			

				

					qq_43886365的博客
				

				

					03-13
					
					4931
					
				

			

		

		

			
				
1， vue中的 `scoped` 属性，其实就是给每一个dom节点元素都添加了不重复的自定义属性（如：data-v-6810cbe5）；
2，然后编译时再给样式的末尾添加`属性选择器`进行样式私有化（如.btn[data-v-6810cbe5]）

			
		

	





	

		

			

				
					
你不知道的原理之style标签的scoped原理(组件作用域 CSS)

				
			

			

				

					wyx66666466的博客
				

				

					01-05
					
					1089
					
				

			

		

		

			
				
添加scoped属性之后，DOM节点添加了一个不重复的data开头的属性来表示其唯一性
添加scoped属性之后，DOM节点的css选择器末尾添加了data属性选择器来私有化该元素的样式

			
		

	





	

		

			

				
					
何为scoped？+ /deep/深度选择解析

				
			

			

				

					weixin_30316097的博客
				

				

					08-03
					
					394
					
				

			

		

		

			
				
何为scoped？
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。
/deep/深度选择解析
/deep/深度选...

			
		

	





	

		

			

				
					
vue.js 第一个程序

				
			

			

				

					weixin_42465416的博客
				

				

					03-23
					
					145
					
				

			

		

		

			
				
src/APP.vue

<!-- 展示模板 --> <template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> </div> </template> <script> // 导入组件 import Hell...

			
		

	





	

		

			

				
					
浅析scoped属性原理及深度作用选择器

				
			

			

				

					Dax1_的博客
				

				

					02-10
					
					1519
					
				

			

		

		

			
				
scoped作用
当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素
scoped目标
scoped是为了实现组件的私有化，表示style只属于当前模块，不对全局造成污染。
使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
scoped原理
通过观察渲染之后的html及CSS可以发现，添

			
		

	





	

		

			

				
					
单文件组件的 <style> 标签支持使用 v-bind

				
			

			

				

					06-11
				

			

		

		

			
				
在Vue中，单文件组件的`<style>`标签是可以使用`v-bind`指令的。使用`v-bind`指令可以动态绑定CSS样式。  例如，假设我们需要动态绑定一个元素的颜色样式，可以这样写：  ```html <template>  <div :class="color...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值