权重

Css的三大机制(特性):特殊性、继承、层叠详解

拜拜、爱过 提交于 2020-02-11 06:55:15
继承 (Inheritance)是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用那些值时,用户代理(浏览器)不仅要考虑继承,还要考虑声明的 特殊性 (specificity),另外需要考虑声明本身的来源。这个过程就称为 层叠 (cascade)。在此我们将讨论css这三种机制的原理和关联。 一、特殊性 考虑以下2对规则,假设每一对规则都匹配同样的元素: h1 {color: red; } body h1 { color:green;} h2.grape {color: purple;} h2 {color: siver;} 每一对规则中只有一个能胜出,因为所匹配的颜色只能是一种颜色,那么怎样知道哪一个规则会更强呢?答案就在于每个选择器的特殊性。 1.特殊性值: 选择器的特殊性由选择器本身的组件确定。特殊性的值表述为4个部分:0,0,0,0。 一个选择器的具体特殊性如下确定: 对于内联样式为:1,0,0,0。 对于选择器中的ID属性值,加0,1,0,0。 对于选择器中的类属性值、属性选择、或伪类,加0,0,1,0。 对于选择器中的元素和伪元素,加0,0,0,1。 通配符选择器(*),加0,0,0,0。 特殊属性计算值: h1 {color: red;}/*specificity=0,0,0,1*/ p em {color:purple;}/

基于投票的热门计数算法策略

拥有回忆 提交于 2020-02-11 03:05:22
类似基于投票的热门计数算法普遍应用在热门文章,热门评论等场景中, 典型的比如网易和今日头条的评论区,国外比如Hacker News和Reddit的主题排序。 一.Hacker News的排序算法 Hacker News是一个主题社区,用户可以为主题投票,根据得票数,系统自动统计出热门文章排行榜。 同时主题发表时间也会对排名产生影响,新发表的主题比旧的主题更容易得到好的排名。 Hacker News的排名算法是这样实现的: (p – 1) / (t + 2)^G 其中,   P表示帖子的得票数,减去1是为了忽略发帖人的投票。   T表示距离发帖的时间(单位为小时),加上2是为了防止最新的帖子导致分母过小(之所以选择2,可能是因为从原始文章出现在其他网站,到转贴至Hacker News,平均需要两个小时)。   G表示"重力因子"(gravityth power),即将帖子排名往下拉的力量,默认值为1.8。 从这个公式来看,决定帖子排名有三个因素: 第一个因素是得票数P。 在其他条件不变的情况下,得票越多,排名越高。 第二个因素是距离发帖的时间T。 在其他条件不变的情况下,越是新发表的帖子,排名越高。或者说,一个帖子的排名,会随着时间不断下降。 第三个因素是因子G。 它的数值大小决定了排名随时间下降的速度。 G值越大,排名下降得越快,意味着排行榜的更新速度越快。 二

网站URL的设计规划

流过昼夜 提交于 2020-02-09 07:45:00
对于一个网站的结构来说,URL的设计也非常的重要,在URL设计时我们应该事先做好规划,应该从用户体验和搜索引擎蜘蛛体验出发,在总体上边应该做到URL清晰、友好、方便记忆,然后还要适当的考虑对于搜索引擎排名的影响,具体来说,URL设计时我们要从下边几点来着手: 1、URL越短越好 这样做主要是为了用户体验,其实对于搜索引擎来说,不超过1000个字母都没有问题,可是如果不考虑用户体验,确实真的用了非常长的URL的话,用户看起来就有些麻烦了,甚至会马上离开你的网站,曾经有人做过这方面的试验,在搜索引擎的搜索结果中,一个较短的URL出现在一个较长的URL下边时,较短的URL的点击率是较长的URL的2.5倍。而且较短的URL也比较有利于复制与传播。人们都比较喜欢简单的东西,特别是现代,人们不喜欢太复杂的东西,能简单就简单。所以网站的URL要尽量的短。 2、URL中避免太多参数 在进行URL设计时,我们尽量使用静态的URL,虽然现代的主流搜索引擎都能够很好的去索引带有参数的动态网页了,可是,使用静态的URL还是有一定的优势的,如果由于某些原因,不能使用静态的URL,而不得不使用动态的URL时,设计的则是URL中的参数应该尽量减少,不要超过三个,一般的情况下URL中的参数2-3个就可以了。参数太多了不但用户看起来困难,对搜索引擎的索引可能也会造成一定的问题。所以,能使用静态就使用静态的URL

Android studio——LinearLayout(线性布局)

十年热恋 提交于 2020-02-06 00:58:41
Android中有六大布局,分别是: LinearLayout(线性布局) RelativeLayout(相对布局) TableLayout(表格布局) FrameLayout(帧布局) AbsoluteLayout(绝对布局) GridLayout(网格布局) 线性布局。这个布局简单的说,就是所有控件都依次排序, 谁也不会覆盖谁。线性布局需要定义一个方向, 横向(Android:orientation="horizontal") 或纵向(android:orientation="vertical")。 也就是说,控件要么就并排横向的排列,要么就纵向的笔直排列。 而Android的开发常用到的有LinearLayout和RelativeLayout。我们屏幕适配的使用用的比较多的就是LinearLayout的weight(权重属性)。下面的关于LinearLayout的一些知识。 <LinearLayout +代码> </LinearLayout>水平布局 android:background="#ef0000"背景颜色android:layout_weight="1"块所占的权重android:gravity="center_vertical">对齐方式android:id="@+id/LinearLayout1" :为该资源控件设置一个资源 id,在 Java 代码中可以通过

css选择器及权重的计算

筅森魡賤 提交于 2020-02-04 02:35:44
!important 直接写在样式上 行间样式选择器 直接写在标签上 id是一对一的 #id 类选择器是多对多的 .test 标签选择器是一对多的 div 属性选择器 [id=“test”] 通配符选择器 是 * 其中权重是256进制,并不是10进制 后代选择器 中间是空格 父子选择器 中间是> 祖先元素竟然是从右向左找的 并列选择器中间没有空格。像这个也可以用div[class="demo"],这个就是并列选择器。好厉害(标签如div必须放前面,因为可能不知道啊。) 权重,一样的话,后面覆盖前面的 来源: https://www.cnblogs.com/czk666/p/9354301.html

css 权重

≡放荡痞女 提交于 2020-02-04 02:33:35
css权重由高到低分别是 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式 作为style属性写在元素标签上的内联样式 id选择器 类选择器 伪类选择器 属性选择器 标签选择器 通配符选择器 浏览器自定义 计算 从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1。 例如: *{} ====》0 li{} ====》1(一个元素) li:first-line{} ====》2(一个元素,一个伪元素) ul li {} ====》2(两个元素) ul ol+li{} ====》3(三个元素) h1+ *[rel=up]{} ====》11(一个属性选择器,一个元素) ul ol li.red{} ====》13(一个类,三个元素) li.red.level{} ====》21(两个类,一个元素) style="" ====》1000(一个行内样式) p {} ====》1(一个元素) div p {} ====》2(两个元素) .sith {} ====》10(一个类) div p.sith{} ====》12(一个类,两个元素) #sith{} ====》100(一个ID选择器) body #darkside .sith p {} ====》112(1+100+10+1,一个Id选择器,个类

css权重

谁都会走 提交于 2020-02-04 02:32:36
选择器 * { width:1000px; } // 通用选择器 .img { width: 180px;} // 类选择器 img[alt="img"] { width: 400px; } //属性选择器 img:hover { width: 500px;} // 伪类选择器 #img { width: 300px;} //ID 选择器 css权重  选择器 权重 行内样式 1000 id 100 类 10 元素,伪元素 1 继承 0.5 !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 !important !important允许开发人员强制应用某样式,他的用法是写在该样式的某属性值后,结束分号前,以便强制应用该样式 来源: https://www.cnblogs.com/chengmingxiaowu/p/7843622.html

CSS 选择器权重计算规则

妖精的绣舞 提交于 2020-02-04 02:31:25
一、选择器类型    1、ID  #id    2、class  .class    3、标签  p   4、通用  *   5、属性  [type="text"]   6、伪类  :hover   7、伪元素  ::first-line   8、子选择器、相邻选择器 二、权重计算规则 第一等:代表内联样式,如: style=””,权值为1000。 第二等:代表ID选择器,如:#content,权值为0100。 第三等:代表 类,伪类和属性 选择器,如.content,权值为0010。 第四等:代表元素选择器和伪元素选择器,如div p,权值为0001。 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 继承的样式没有权值。 三、比较规则 1,0,0,0 > 0,99,99,99, 也就是说从左往右逐个等级比较,前一等级相等才往后比 1, 0 , 0, 0 0, 99 , 99 , 99 !important 的作用是提升优先级, 加了这句的样式的优先级是最高的 -------references------------------------------ https://www.cnblogs.com/dq-Leung/p/4213375.html 来源: https://www.cnblogs.com/zyjzz/p/10380729.html

2 - 前端基础--CSS 选择器

前提是你 提交于 2020-02-04 02:09:00
引入css方式(重点掌握) 1、行内样式 <div> <p style="color: green">我是一个段落</p></div> 在标签内添加一个style属性,属性值为要设置的样式:样式的值。 2、内接样式 <style type="text/css"> /*写我们的css代码*/ span{ color: yellow; }​</style> 3、外接样式 3.1 链接式 <link rel="stylesheet" href="./index.css"> 3.1 导入式 <style type="text/css"> @import url('./index.css');</style> css的选择器: ​ 1.基本选择器 ​ 2.高级选择器 CSS选择器 基本选择器 基本选择器包括: 标签选择器 id选择器 类选择器 1.标签选择器 标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“ body{ color:gray; font-size: 12px;}/*标签选择器*/p{ color: red;font-size: 20px;}span{ color: yellow;} 2.id选择器 # 选中id 同一个页面中id不能重复。 任何的标签都可以设置id

【前端基础】- CSS 1-CSS选择器

半世苍凉 提交于 2020-02-04 02:08:01
引入css方式(重点掌握) 1、行内样式 <div> <p style="color: green">我是一个段落</p> </div> 在标签内添加一个style属性,属性值为要设置的样式:样式的值。 2、内接样式 <style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style> 3、外接样式 3.1 链接式 <link rel="stylesheet" href="./index.css"> 3.1 导入式 <style type="text/css"> @import url('./index.css'); </style> css的选择器: ​ 1.基本选择器 ​ 2.高级选择器 CSS选择器 基本选择器 基本选择器包括: 标签选择器 id选择器 类选择器 1.标签选择器 标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“ body{ color:gray; font-size: 12px; } /*标签选择器*/ p{ color: red; font-size: 20px; } span{ color: yellow; } 2.id选择器 # 选中id 同一个页面中id不能重复。