浏览器对CSS的样式权重Specificity计算

2016-09-13

上一篇讲了对CSS样式浏览器的渲染结果是什么,但是为什么是这样,为什么有的样式定义优先级就高一些,其实,浏览器是通过specificity计算来决定的.

1.specificity是什么

一个页面元素的样式是怎么计算出来的呢?

浏览器先对外部样式,内部样式和行内样式进行解析形成语法树,然后通过匹配规则把匹配到一个元素的样式赋予这个元素.

然而有时候会出现这种问题,内部样式对某种样式属性进行了定义,外部样式也对某种样式进行了定义,那么浏览器该对这个属性进行哪种取值.如果选择器不相同,那么又该要哪种选择器优先呢?

这时就要specificity来决定了.Specificity就是对选择器进行权重比较的一个值.

2.specificity如何计算

specificity的值是这样计算的:

计数选择器中ID选择器的个数(如: #element { … }), 让 a = 计数值.
计数选择器中类选择器,属性选择器,伪类选择器的个数(如: .class1, [id=1], :hover), 让 b = 计数值.
计数选择器中类型选择器(标签选择器)和伪元素选择器的个数(如: h1, :before), 让 c = 计数值.

浏览器对页面渲染时CSS优先级顺序(浅析)

2016-08-18

本文只是CSS样式优先级的浅析,只是用于资料查询的话本文刚好合适.

如果想要更多关于CSS优先级的内容,请看浏览器对CSS的样式权重Specificity计算.

1.不同属性style的定义

做一个页面样式定义优先级的实验,直接上代码

<head>
    <link rel="stylesheet" href="css/index.css">
    <style type="text/css">
        .class1 {
            color : black;
        }
        .class2 {
            color : blue;
        }
    </style>
</head>
<body>
    <p id="test1" style="color:yellow;" class="class1">What color am I?</p>
</body>

外部样式index.css内容

.class1 {
    color : green;
}

可以看到,这个页面的字体颜色是黄色的,也就是说标签上的style优先级最高.

当我们把style去掉时

<p id="test1" class="class1">What color am I?</p>

页面的字体颜色变成了黑色,说明直接定义在head中的css样式优先级高于外部样式的.

我们可以继续把style标签中的class1删掉,会发现字体变成了外部样式定义的绿色.

所以得出结论:

行内样式定义 > 内部样式定义 > 外部样式定义

Nodejs+Express+Forever的服务器端入门

2016-08-10

1.安装配置环境

1.1 node.js

首先,安装nodejs,直接下载安装就好,无需配置 Nodejs下载.

nodejs安装好之后,npm也就安装好了(Node.js在0.6.3版本之后内建npm).

npm就是node package manager,就是一个node的套件管理.

1.2 express

express是node.js的一个web应用程序框架,提供了很多强大的API来构建一个web应用.

安装express,在项目目录下执行

npm install express

至于指令加不加–save等参数就是看项目本身了,在这里不讲解,可查看npm了解详情.

Javascript对剪贴板的操作

2016-07-28

1. 获取剪贴板

不同的桌面应用可以将各种数据复制到剪贴板中,那么从Js层面来说,它应该如何拿到系统剪贴板的数据呢.

首先,js要监听相应的事件,比如,我要在一个web应用编辑器中来操作剪贴板,那么,这个监听就应该是整个document的事件.

$('body').addEventListener('paste', function(event){
    event.preventDefault();
    ...
});
$('body').addEventListener('copy', function(event){
    event.preventDefault();
    ...
});

一共有beforecopy,beforecut,beforepaste,copy,cut,paste这些事件可以绑定在任意的标签上.

event中有一个属性,clipboardData,它就是系统剪贴板的数据.无论是copy还是paste,其实都是对它的操作.

clipboard有如下的属性:

属性	类型	说明
dropEffect	String	默认为none
effectAllowed	String	默认为uninitialized
files	Obejct	默认为{length:0, item: function}
types	Object(Array)	默认为{‘text/html’:…}

其实还有items属性,不过只有chrome和opera支持

ECMAScript中Number原始类型变量

#Javascript

2016-06-28

我们都知道,在Js中,变量都是弱类型的,一共有5种变量类型,Number就是其中一个.

这篇文章将会对Number类型进行一些细致的讲解.

Number可以表达十进制,八进制和十六进制,其中:

八进制表达为数字前加”0”:

  var a = 010; // a = 8

十六进制表达为数字前加”0x”:

  var b = 0x10; // b = 16

几个雅虎前端优化法则(部分)

#Frontend

2016-03-28

这里将遇到过的几个优化问题加以记录.

根据雅虎前端优化法则:

减少DOM元素数量 DOM元素数量越多,JavaScript遍历的就越久,会影响效率.

将HTTP请求次数尽可能降低 浏览器打开网页,大部分时间都是在下载css,js,images等等.

预加载下个页面的资源 这个想法跟计算机体系结构中的流水线思想很像,就是说可以预判用户下个页面,然后提前加载资源. 在用户空闲时加载js,css等,然后缓存.

文本分类（三）特征提取表达与Weka分类器训练与测试

2016-03-22

时隔好久好久,文本分类的第三篇终于来了!

言归正传,在分词之后就要特征表达和提取了,什么意思呢?分类器要对文章分类,可是分类器怎么识别每一篇文章呢,它又怎么来对每一篇文章进行数据化的处理呢?

对文章分类有这么几种方法:

基于词的匹配
基于知识规则
基于统计的方法(机器学习)

可以看出来,这三种分类方法正是一个分类的发展过程.词的匹配太过死板,很难准确的提高分类程度.知识规则要由人来总结,而且还要将知识规则表达成数据,也不可靠.现在的分类方法,大多是第三种的机器学习.

机器学习就是给计算机一种能够自主挖掘规则的方法.对文本分类来说,就是用一部分语料库训练计算机,然后给它测试集来进行测试.因此,要将文本表达成计算机识别的数据.

有一种叫做向量空间模型的表达方法-VSM,意思就是把每一篇文章表达成一个词汇的堆积,这种方法也叫词袋.在这种模型中,一篇文章被看作单词特征项集合来看,利用加权特征项构成向量进行文本表示.

chmod权限指令记录

#chmod

2016-03-15

经常用chmod来更改文件权限,有时会忘记部分权限累加的含义,这里记录一下数字模式

chmod 400 file // Read by owner
chmod 040 file // Read by group
chmod 004 file // Read by world

chmod 200 file // Write by owner
chmod 020 file // Write by group
chmod 002 file // Write by world

chmod 100 file // execute by owner
chmod 010 file // execute by group
chmod 001 file // execute by world

在Yii2.0环境下,前端AngularJs中的$http服务配置与使用

2016-03-14

现在前后端的异步通信用的最多的应该算是Ajax了吧, JQuery和Angular中都有提供相应的服务.

$.ajax()
$http()

默认配置下,它们最大的不同就是Angular把数据作为payload(json)数据传送,而jquery把数据作为form data(在url中)传送.

这两种方式下,服务器端接收数据的方式是不同的,以PHP为例,对form data的接收直接$_POST就可以,而对payload数据则要用

json_decode(file_get_contents("php://input"), true);

在AngularJs的$http服务中也可以配置request的header,这样就可以统一后台接收数据的方法,而不用写两套接收数据的方法.

app.config( ['$httpProvider', function($httpProvider){
    $httpProvider.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    $httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript, */*; q=0.01';
}] );

AngularJs各Controller之间的通信

#AngularJs

2016-03-05

在AngularJs的Controller之间传值通信

AngularJs里面Controller的通信基本是$emit,$broadcast,$on.

$emit是子控制器向父控制器发通信的方法. $broadcast是父控制器向子控制器发通信的方法. $on是监听方法,用于监听通信.

<div class="home" ng-controller="homeCtrl">
  <div class="firstChild" ng-controller="firstCtrl">
    <button ng-click="to-home()">第一个子控制器</button>
  </div>
  <div class="secondChild" ng-controller="secondCtrl">
    <button ng-click="to-home()">第二个子控制器</button>
  </div>
</div>

Prev Next