CSS（六）

番茄西红柿发布于2019-04-23 13:43 / 1291人阅读

摘要：权重权重权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用权重相同的，后写的样式会覆盖前面写的样式。

CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

权重的计算实例

1、实例一：


......
这是一个div元素

2、实例二：


......

    
        这是一个h2标题

CSS3新增选择器

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
3、E:first-child：匹配元素类型为E且是父元素的第一个子元素
4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素
6、E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
8、E:first-of-type：匹配父元素的第一个类型为E的子元素
9、E:last-of-type：匹配父元素的最后一个类型为E的子元素
10、E:only-of-type：匹配父元素中唯一子元素是E的子元素
11、E:empty 选择一个空的元素
12、E:enabled 可用的表单控件
13、E:disabled 失效的表单控件
14、E:checked 选中的checkbox
15、E:not(s) 不包含某元素

16、E:target 对应锚点的样式


......
标题一
......
标题一

17、E > F E元素下面第一层子集
18、E ~ F E元素后面的兄弟元素
19、E + F 紧挨着的兄弟元素

属性选择器：
1、E[data-attr] 含有data-attr属性的元素


......
这是一个div元素

2、E[data-attr=ok] 含有data-attr属性的元素且它的值为“ok”
3、E[data-attr^=ok] 含有data-attr属性的元素且它的值的开头含有“ok”
4、E[data-attr$=ok] 含有data-attr属性的元素且它的值的结尾含有“ok”
5、E[data-attr*=ok] 含有data-attr属性的元素且它的值中含有“ok”

云服务器 GPU云服务器六钟头六十行六点网络四舍六入

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2257.html

webpack4 系列教程(六): 处理SCSS

摘要：只需要在处理的配置上增加编译的即可。了解更多处理的内容本节课源码所有课程源码教程所示图片使用的是仓库图片，网速过慢的朋友请移步原文地址系列教程六处理。根据规则放在最后的首先被执行。这节课讲解webpack4中处理scss。只需要在处理css的配置上增加编译scss的 LOADER 即可。了解更多处理css的内容 >>> >>> 本节课源码 >>> 所有课程源码教程所示图片使用的是...

马龙驹 2019-08-23 11:33 评论0 收藏0
使用css伪类before／after实现正方形三宫格、正方形六宫格、正方形九宫格

摘要：结构图解析后记结构图解析： showImg(https://segmentfault.com/img/bVbvXEo?w=862&h=235); showImg(https://segmentfault.com/img/bVbvXEq?w=604&h=814); showImg(https://segmentfault.com/img/bVbvXEv?w=604&h=326); 后记...

CNZPH 2019-08-30 15:44 评论0 收藏0
React系列 --- 从使用React了解Css的各种使用方案(六)

摘要：当然这不是只限于使用或者其他打包工具的方式都能支持使用优点模块化和可重用性没有冲突显性依赖不会污染全局可以配合预处理器使用少开发单独文件写法基本一致 To define is to limit. 定义一样东西，就意味着限制了它。——王尔德《道林·格雷的画像》 React系列 React系列 --- 简单模拟语法(一)React系列 --- Jsx, 合成事件与Refs(二)Reac...

freecode 2019-08-26 10:37 评论0 收藏0
CSS学习笔记(六) 元素定位

摘要：方法一为父元素添加方法二同时浮动元素方法三添加非浮动的清除元素定位布局的核心是属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。绝对定位绝对定位会把元素彻底从文档流中拿出来，然后相对于其他元素默认是定位上下文定位。 1.盒模型盒模型，就是浏览器为页面中的每个 HTML 元素生成的矩形盒子。这些盒子们都要按照可见版式模型（visual formattin...

浠ラ箍 2019-08-28 18:03 评论0 收藏0
Webpack 4.X 从入门到精通 - 第三方库（六）

摘要：在开发的时候会时常用到第三方的库或者框架，比如耳熟能详的。使用第三方库在入口文件当中直接导入安装目录结构如图内容如下内容如下陈学辉内容如下这是自带的内容如下内容如下引入后打开页面会看到最后一个标签有了一个绿色的背景。在开发的时候会时常用到第三方的库或者框架，比如耳熟能详的jquery。借助它们能提高开发效率，但是如何在webpack中使用呢。这篇文章介绍两个东西，如何使用第三方库以及...

dunizb 2019-08-23 11:32 评论0 收藏0