不同的组件页面scoped用法、css选择器

• scoped后vue编译过程中会生成一个唯一的data-xxx标志，样式后面会跟上该标志，以避免污染全局样式
• 在父组件中设置了scoped中的样式 如果该组件中有子组件 那子组件的根元素中也会继承父组件中生成的style的唯一标识

---

虽然scoped好处多多但是我们还需慎用scoped

• css样式不同选择器都有权重值，权重值越大优先级越高。

【此处涉及到css的选择器】

• 基础选择器、复合选择器、c3新增属性选择器

1.     基础选择器：

     标签选择器  ------> style之间写出标签名修改样式即可

     id选择器      ------> HTML元素以id属性来设置id选择器,id名称在整个页面里是唯一的CSS                                     中 id 选择器以 “#” 来定义

     class选择器 ------> html元素以class属性设置类名，css中以 .点号来定义

     通配符选择器 ------>在css中，通配符选择器使用“ * ”定义，它表示所有的元素

              

•         内联样式表的权重值最高，值为1000。
•         id选择器的权重值为100。
•         class选择器的权值为10。
•         类型（元素）选择器的优先级为1。
•         通配符选择器的优先级为0。
•         在同一组属性设置中表有**“!important"**规则的优先级最大。

综上优先级： 内联样式 > id选择器 > class类选择器 > 元素选择器 > 通配符选择器

     2.     复合选择器：

      后代选择器 ------> 选择父级元素中的子级元素。

                                   div  p { 样式修改 } [div标签下面所有的p标签]

     子元素选择器 ------>子元素选择器只能用于选择作为某元素子元素的元素; 

                                   div > p {  样式修改 } [div下一级p标签]

      并集选择器 ------> 并集选择器可以选择多组标签，将他们同时定义成相同的样式;

                                   元素1,元素2 { 样式修改 } [多个选择器的并集声明]

      伪类选择器 ------> 向某些选择器添加特殊效果;

                                   链接伪类选择器：给链接添加特殊的效果，顺序不能错 l v h a

                                        a:link 未访问的链接
                                        a:visited已访问的链接
                                        a:hover⿏标悬停链接上
                                        a:active⿏标点击链接时

     伪元素选择器 ------> before和after伪元素

                                      **::before**创建一个伪元素该元素是所选元素的第 一 个子元素。                                        **::after**创建一个伪元素，该元素是所选元素的最后一个子元素。

     3.     新增属性选择器：

      属性选择器

      结构伪类选择器------>

• nth-child(n) 选择某个或多个特定元素时，n不必局限与数字，可以是关键字或者数字
• 当n为数字时，从1开始
• n为关键字时，even表示偶数，odd表示奇数
• n为公式时，从0开始计算，但是第0个元素或者超过元素的个数会被忽略

设置背景简写：

     background: 背景颜⾊ 背景图⽚地址 背景平铺 背景滚动 背景位置;【顺序不能错】
     例：background: gray url(ms.jpg) no-repeat fixed center top
 

• 一、scoped的这一操作，虽然达到了组件样式模块化的目的，但是会造成一种后果： 每个样式的权重加重了：理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。这是增加复杂度的其中一个维度，所以如果要达到修改样式的目的，就必须加重我们要修改样式的权重（增加选择器层级，ID选择器，并列选择器，impotant等）
• 二、如果有两个组件中均含有scoped 而且一个组件中包含了另一个组件，所以在Dom渲染的时候会在dom节点上加上很多唯一style的标识，有的是继承的，有的是自己组件的，所以我们在修改样式的时候还是会涉及到上面所说的权重问题，如果做不好可能会出现尴尬的问题就是自己的组件修改不了自己组件的样式
• 三、我们设置此属性后我们想要改变组件中的样式是改变不了的，当然我们可以通过强大样式穿透进行解决！/deep/