大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

css组件样式,css样式种类

怎么给组件中的CSS样式加权?(屏蔽组件外CSS样式对它的影响)

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的市北网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

选择符Specificity值列表:

选择符 语法 示例 特性

通配选择符 * *{ width:560px;} 0,0,0,0

类型选择符 E1 td { font-size:12px;} 0,0,0,1

伪元素选择符 :first-line :first-line{ font-size:12px;} 0,0,0,1

伪类选择符 :link :link { font-size:12px;} 0,0,1,0

属性选择符 [attr] [title] {color:blue;} 0,0,1,0

ID选择符 #ID #test{ font-size:12px;} 0,1,0,0

类选择符 E1.className .test{color:blue;} 0,0,1,0

子对象选择符 E1 E2 body p {color:blue;} E1+E2

相邻选择符 E1 + E2 div + p {color:blue;} E1+E2

选择符分组 E1,E2,E3 .td1,a,body {color:blue;} E1+E2+E3

包含选择符 E1 E2 table td {color:blue;} E1+E2

规则:

1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。

如:div style=”color: red”test/div

外部定义指经由link或style标签定义的规则;

2.!important声明的Specificity值最高;

3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;

4.由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。

算法:

当遇到多个选择符同时出现时候

按选择符得到的Specificity值逐位相加,

{数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}

就得到最终计算得的specificity,

然后在比较取舍时按照从左到右的顺序逐位比较

———-以上内容都是权重理论上的知识,按理说支持css2.1的浏览器应该都遵循———-

IE6和IE7却不完全是那么回事;这里说的IE7排除掉IE8的兼容模式。

1

2

3

4

5

6

7

8

a { /* 权重为[0,0,1] */

color: #00f;

background-color: #ff0;

}

a:hover { /* 权重为[0,1,1] */

color: #ff0;

background-color: #00f;

}

蓝色字,黄色背景,鼠标悬停的时候颜色颠倒

接下来,在添加规则

1

2

3

4

5

p a.cl1 { /* 权重为[0,1,2] */

color: #f00;

background-color: #0ff;

}

pa class="cl1" href="#".../a/p

红色字,浅绿色背景,权重为 [0,1,2], 比第一条权重高

在IE6下”normal” (not hover) 的值被覆盖了, 但是没有覆盖”hover”的值. 换句话说,权重为[0,1,1]的”hover”依然生效, 它没有被比他权重高的p a.cl1 [0,1,2]所覆盖 (但是没有定义:hover伪类)

1

2

3

4

5

.cl2 a.cl3 { /* 权重为 [0,2,1] */

color: #f00;

background-color: #0ff;

}

p class="cl2"a class="cl3" href="#".../a/p

红色字,浅绿色背景,权重为 [0,2,1], 比第一条规则”normal”和”hover”都要高

现在在IE6下不管是”normal”还是”hover”的值都被覆盖了,这时候权重 [0,2,1] 完全覆盖了权重 [0,1,1]

1

2

3

4

5

div p :hover { /* 权重为 [0,1,2] */

color: #f00;

background-color: #0ff;

}

divpa href="#".../a/p/div

当鼠标悬停在链接上的时候是红色字,浅绿色背景 , 权重为 [0,1,2], 比第一条”hover”的权重 [0,1,1]高

第一条:hover完全被覆盖,IE6也是一样. 这个例子的权重 [0,1,2]和第二个例子的权重是一样的,但是它多了对 伪类:hover的定义就能完全覆盖第一条”hover”规则, 而第二个例子就不会覆盖

演示地址:IE6/Win: 关于伪类:hover的权重问题

IE6/win下伪类:visited也存在类似问题,不再赘述,演示地址:IE6-/Win: 关于伪类:visited的权重问题

还有其他一些,在IE67下都会产生错误权重的情况,其他浏览器有条件的请帮忙测试一下:

1

2

3

4

5

6

7

p.c12 {/* 权重为[0.1.1] */

color: #c00;

}

div .c12 {/* 权重为[0.1.1] */

color: #090;

}

divp class="c12"el.class (red), el .class (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)/p/div

如果顺序换过来el .class (red), el.class (green),就是正确的了

1

2

3

4

5

6

7

div .c24 {/* 权重为[0.1.1] */

color: #009900;

}

.c23 p {/* 权重为[0.1.1] */

color: #CC0000;

}

div class="c23"p class="c24".class el (red), el .class (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)/p/div

如果顺序换过来el .class (red), .class el (green),就是正确的了

1

2

3

4

5

6

7

div #c28 {/* 权重为[1.0.1] */

color: #009900;

}

#c27 p {/* 权重为[1.0.1] */

color: #CC0000;

}

div id="c27"p id="c28"#id el (red), el #id (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)/p/div

如果顺序换过来el #id (red), #id el (green),就是正确的了

:first-letter使用的比较少,这个例子就不写了

1

2

3

4

5

6

7

8

p.c31 {/* 权重为[0.1.1] */

color: #c00;/* red */

}

body p.c31 {/* 权重为[0.1.2] */

color: #090;/* green */

color: miao;  /* 故意的错误 */

}

p class="c31"在IE67下会错误显示红色/p

演示地址:其他权重错误

less样式如何使用cssmodule

1.Less

变量:@变量名

混合:在a类中使用b类的所有属性, .a{ .b(); color:#fff}

嵌套:使用嵌套代替原始css的层叠, 表示当前选择器的父级

运算:+ - * /,可以对任何数字、颜色或变量进行运算

转义:

函数:Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

命名空间和访问符

作用域:首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承

注释: // 行注释,/.../块注释

导入:@import "library";可以导入一个 .less 文件,此文件中的所有变量就可以全部使用了, .less 扩展名,可以省略掉

2.css modules

CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会与其他选择器重名。 CSS Modules是通过哈希算法将类名编译,保证类名的唯一性。

声明全局规则:

灵活按需导入以便复用代码,避免样式全局污染,但不利于写组件单元测试

3.CSS bem规范

BEM - Block Element Modfier(块,元素,编辑器)

在选择器中用三种符号来表示扩展关系

-中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。

__ 双下划线:双下划线用来连接块和块的子元素

-- 双中划线:用来描述一个块或者块的子元素的一种状态

type-block__element--modifier

Block:不是指html中的块元素,任何独立的页面元素都可以视为一个块,这个独立的块容器有一个唯一的css类名,也就是这个块的名字

Element:属于块的某部分,任何的在Block中的DOM节点,都是一个element。在一个已知的block中,所有的element在语义上都是相等的,Block下的所有Element不考虑层级嵌套关系,扁平化处理都属于Block,即连续的__下划线只能出现一次

Modifier:用于修饰块或元素,体现在外观或行为上的改变,都可作为一个修饰器,如active状态,add/edit的操作

注意事项:

1)保证各个部分只有一级B__E--M,修饰器需要和对应的块或元素一起使用,避免单独使用。不能有 .block__el1__el2 的格式

2)仅以类名作为选择器,不使用ID或标签名来约束选择器

...import'./index.less'...divclassName="article"divclassName="article__body"pclassName="article__title"title/pbuttonclassName="article__button--primary"/buttonbuttonclassName="article__button--success"/button/div/div//index.less文件.article{max-width:1200px;__body{padding:20px;}__title{font-weight:700;}__button{padding:5px8px;--primary{background:blue;}--success{background:green;}}}

CSS 关于样式穿透

前两天在项目中遇到一个问题,需要手动去修改引入的第三方组件的CSS样式,我第一想法就是直接在组件上新增一个自定义的class去覆盖原有的样式,结果当然是行不通的(不然我现在也不会在这里写这篇)。

于是我查了一下,是因为我在vue组件里面将设置成了局部样式,局部样式只在当前组件生效,对引入的其他组件是无法起作用的。然后我试了一下,把 scoped 去掉就行了。

或者在组件里面写多一份全局样式

但是如果不在style里面写 scoped ,直接写成全局样式,最后可能会面临多个组件之间样式污染的问题。如何使得局部样式可以覆盖到引入的第三方组件呢,我想到以前涉及过的一个名词 样式穿透 ,立刻实践了一下,果然就成了。

样式穿透 需要定义一个外层的style,通过 可以使得socped属性下的的样式穿透到全局, 外层 第三方组件 或者 外层 /deep/ 第三方组件 。 是 /deep/ 的别名,但是在sass之类的样式预处理器之中无法正确解析。

CSS样式优先级及穿透

CSS优先级是根据等级的值相加得出选择器的权重来决定的。

!important 行内样式 ID 类、伪类、属性 标签名 继承 通配符

计算权重方式:

从图上看讲权重分为:

1. 第一等:代表内联样式,如: style=””,权值为1000。

2. 第二等:代表ID选择器,如:#content,权值为0100。

3. 第三等:代表类,伪类和属性选择器,如.content,权值为0010。

4. 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。

5. 通配符、子选择器、相邻选择器等的。如*、、+,权值为0000。

6. 继承的样式没有权值。

当权重一样时遵循准则:

1. 选择器越 具体 优先级越 高

2. 在同一个级别的情况下, 最后 指定的规则优先级就越 高 ,也就是我们通常说的就近原则;

权重计算例子:

1. li  - 0 0 0 1 权重为 1

2. h1 + *[rel=up] -0 0 1 1 这个相邻选择器由标签选择器与属性选择器组成,属性选择器为10,因此权重为11

3. ul ol li.red - 0 0 1 3 权重为13

4 li.red.level - 0 0 2 1 权重21

1. !important  (width: 100% !important)

2. 行内样式   (style="width:100%")

3. id选择器  (#myIdName)

4. class选择器  (.myClassName)

5. 标签选择器  (div,h1,p)

1. 使用 " " 符号,这种方式主要是用于普通css,方式为:

外层 第三方组件样式: .wrapper .swiper-pagination { color: #eee  }

2. 使用 "/deep/" ,这种方式主要用于sass或less,方式为:

外层 /deep/ 第三方组件样式: .wrapper /deep/ .swiper-pagination { color: #eee  }

修改vux组件的css样式

我们经常用vux的组件快速开发移动端的项目,比如常用的datetime组件,会遇到这样的问题。

而我们的需求要求value值靠左而非靠右,但datetime没有提供移动value值位置的属性,那怎么办呢?

首先需要找到经过vue处理后的值,

一种方法我们可以在全局上修改,简单粗暴。

vue也给我们提供了局部修改的方法:

这最终会被vue编译成:

可以看到字体变成向左靠齐,当然,可以用这种方法,修改任一内置组件,其他ui框架的修改方法也类似。


当前标题:css组件样式,css样式种类
网站链接:http://dzwzjz.com/article/hosiod.html
在线咨询
服务热线
服务热线:028-86922220
TOP