整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS样式覆盖规则
很多情况都会导致一个元素被运用上多种样式，样式覆盖的规则也需要根据不同的情况来定，具体规则如下。规则一：由于继承而发生样式冲突时，最近祖先获胜。CSS的继承机制使得元素可以从包含它的祖先元素中继承样式，考虑下面这种情况：
<html>
<head>
<title>rule1</title>
<style>
body {color:black;} p {color:blue;}
</style>
</head>
<body>
<p>welcome to <strong>加粗</strong></p>
</body>
</html>strong分别从body和p中继承了color属性，但是由于p在继承树上离strong更近，因此strong中的文字最终继承p的蓝色。
规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜。在上面的例子中，假如还指定了strong元素的样式，如：
strong {color:red;}那么根据规则二，strong中的文字最终显示为红色。
规则三：直接指定的样式发生冲突时，样式权值高者获胜。样式的权值取决于样式的选择器，权值定义如下表。CSS选择器 权值标签选择器 1伪元素(:first-child等) 1类选择器 10ID选择器 100内联样式 1000伪类(:link等) 10可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如"#nav .current a"的权值为100 + 10 + 1 = 111。
规则四：样式权值相同时，后者获胜。考虑下面这种情况
<p class="byline">Written by <a class="email" href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a></p> .byline a {color:red;} p .email {color:blue;}".byline a"与"p .email"都直接指定了上面的a元素，且权值都为11，根据规则四，最终显示蓝色。由于样式表可以是外部的，也可以是内部的，规则四提醒我们要注意外部样式表引入的顺序（及<link>元素的顺序），以及外部样式表与内部样式表的出现位置。一般来说，内部样式表出现在所有外部样式表的引入之后，一般是在</head>之前。
规则五：!important的样式属性不被覆盖。!important可以看做是万不得已的时候，打破上述四个规则的"金手指"。如果你一定要采用某个样式属性，而不让它被覆盖的，可以在属性值后加上!important，以规则四的例子为例，
.byline a {color:red !important;}
可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖，不能滥用!important。
个是我用htmlcssrScrip写出来的东西，它包括两个部分，一个是上面的转盘，一个是下面的计时器。
·点击spin旋转，它就转，stop停止，停止以后就会反馈，就是获得了什么，学习两个小时。获得这个以后就可以start timer，开始学习。
·这个是重置，重置timer，计时器。如果学完了两个小时再转一次，转完以后又是学习两个小时，再开计时器，学完又重置一遍，再转一下，学习30分钟，再去学30分钟，再开，再关。
这么一个东西要怎么做？等一下我教你们怎么做。
·首先先在桌面新建一个文本文档，给它命名成learning，learning，will，叫什么？学习的转盘，带有WIS，WIS什么timer，计时timer，计时器。
·把它的后缀改一下，改成html覆盖，保存。
·保存完了以后用vs code打开，打开完以后就是一个空白的页面。
·接下来敲代码的时间，写一个前端代码，实现刚刚那个小东西。
·首先把框架给卸了，然后是Id doctyper，html，这个好像是浏览器之类的问题的，管它HML后，这是language的缩写，它就等于English的缩写。
·下面是made，chaset，这是设置一个字符编码的UTF-8，name，这是一个4口属性。
·内容是content，content的宽度是等于设备的宽度。
·它的initial SCA，SCA就是它的初始规模，是等于1.0，就是跟网页的大小是一样的。
·接下来是一个title，就是标题，标题就是learning，learning，will学习的，转盘带有time，就是带有计时器的一个学习的转盘。
·下面是CS的内容，就是style样式，这是CSS的内容。
·接下来就是到波底，接下来就是body的内容，body，head还没结束是吧？不对，我的head去哪了？问题好大，这里有一个head，我是觉得是先写大皇家是比较好的，就是the head。
·head里面包括几个部分，就是title，标题还有style，就是CSS，body，body里面，波波底下面是h，是HGL结束了。
·body里面包含两个东西，两个div就是两个块，这块一个是用来做抽奖的转盘的，一个是用来做timer，就是计时器。
·记下来是叫script东西，就是script，screw script。
·这就是整个的框架，就是这里是CSS的地方，这里是title，它的标题就是网页上它给出的标题，就是地址栏那里的标题。
·这里是两个div，就是两个块，到时候就是用两个容器来装抽奖的转盘和计时器。
·这里是加入script的代码。
大概就讲到这里。
在前两篇文章中，我们有讲过前端开发过程中需要注意到的HTML和Javascript规范问题，如果还没看过的，可以去看一下这两篇文章。今天这篇文章我们继续学习一下关于CSS的规范问题。
前端开发中的Javascript规范，来学习一下吧
前端开发过程中的HTML规范，来学习一下吧
CSS
ID作为网页上唯一标识一个元素的属性，在CSS中不推荐被使用，而应该使用Class来代替。
因此，我们不推荐下面采用id的写法。
不推荐写法
我们推荐下面采用class的写法。
推荐写法
而且，CSS的选择器具有不同的权重，大致可以表示成这样。
选择器权重
通过上面的权重图可以看出，一个ID选择器的权重是class选择器权重的10倍，因此如果使用ID选择器来定义CSS样式，很容易就会覆盖后面定义的Class选择器，而且还不容易发现。
通过下面一段代码，就能说明问题。
代码
在编写CSS时，应该尽量使用具有语义化的class选择器，而不应该直接使用标签名，这样可以使得CSS样式更加容易维护。
我们可以考虑这样一种情况，如果页面上的标签需要更换，而我们使用了标签名去定义样式，这样就会修改CSS文件中的内容；而如果我们只采用了Class去定义样式，那么页面上标签的修改并不会影响到CSS文件中的内容。
因此我们不推荐下面这种写法。
不推荐写法
我们推荐下面这种写法。
推荐写法
在CSS中提供了很多例如margin, padding一样的缩写属性，在编写CSS样式时，应当尽可能的使用缩写属性，不仅可以提高代码的可读性，而且还会提高代码执行效率。
因此，我们不推荐下面这种写法。
不推荐写法
我们推荐以下使用缩写属性的写法。
推荐写法
在属性值为0时，可以省略掉后面的单位。
因此我们不推荐下面这种写法。
不推荐
我们推荐下面的写法。
推荐写法
为了保证书写CSS样式的一致性，属性名后紧跟冒号，冒号和属性值之间有一个空格。而且每个选择器和属性声明都应该另起一行。
因此，我们不推荐以下写法。
不推荐写法
我们推荐以下写法。
推荐写法
在需要使用到引号的地方，推荐使用双引号("")，而不是单引号('')，在需要使用到url时，不应该使用引号。
因此我们不推荐下面的方式。
不推荐写法
我们推荐使用下面写法。
推荐写法
今天这篇文章讲解的是前端开发中的应该遵循的CSS规范，内容可能不是很全面，大家可以自行补充。
*请认真填写需求信息，我们会在24小时内与您取得联系。
