发布于 2015-05-21 05:57:49 | 291 次阅读 | 评论: 0 | 来源: 网友投递
CSS层叠样式表
CSS(层叠样式表) 即 级联样式表 。
它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="MyCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- 派生选择器实例 -->
<a>这是一个div外部a标签的样式</a>
<div>
<a>这是一个div内部a标签的样式</a>
<h2>css基础语法</h2>
</div>
<!--id选择器与派生选择器实例 -->
<a href="https://www.baidu.com/" > 百度不变色</a>
<div id="divid">
<a href="https://www.baidu.com/" >百度变色</a>
</div>
<br />
<!--类选择器-->
<div id="divclass" class="divclss">
div类选择器实例
</div>
<br />
<!--属性选择器-->
<p title="t1"> 属性选择器</p>
<!--和body指定的颜色一样-->
<p title="t2"> 属性选择器</p>
</body>
</html>
h2,a,h1{
color:red;
}
body{
color:yellow;
}
div a{
color: blue;
}
#divid a{
color:darkred;
}
.divclss{
color:chartreuse;
}
[title = t1]
{
color: mediumvioletred;
}
/*这个要按顺序来*/
div a:link {color:blue;}
div a:visited {color:blue;}
div a:hover {color:red;}
div a:active {color:yellow;}
/*id选择器的优先级比类型选择器优先级高*/
效果截图:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*标签选择器*/
div { color: blue } /*绿色*/
/*类选择器*/
.a1 { color:yellow } /*黄色*/
/*类派生选择器*/
.a1 div {color:purple} /*紫色*/
/*id选择器*/
#id1{ color: cyan} /*青色*/
#id2{ color: cyan} /*青色*/
#id3{ color: cyan} /*青色*/
/*id派生选择器*/
#id2 div{ color: red} /*红色*/
</style>
</head>
<body>
<div id="id1" class="a1"> 我是青色的 id选择器优先级高于类选择器 </div>
<div class="a1">
<div class="a1">我是紫色的 类派生选择器优先级高于所有类选择器</div>
<div id="id2">我是青色的 id选择器优先级高于类派生选择器
<div id="id3">
我是红色的而不是青色的 id派生选择器优先级高于id选择器
</div>
</div>
</div>
</body>
</html>
效果图:
(原博客地址 : http://www.cnblogs.com/aaronjs/p/3156809.html#_h2_1 )
计算指定选择器的优先级:重新认识CSS的权重
使用的规则也很简单,就是 选择器的权值加到一起,大的优先;如果权值相同,后定义的优先 。虽然很简单,但如果书写的时候没有注意,很容易就会导致CSS的重复定义,代码冗余。
从上面我们可以得出两个关键的因素:
一篇文章 256个class类名选择器干掉一个id选择器实例页面
http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html
给出的答案是:所有的类名(classes)都是以8字节字符串存储的。8字节所能hold的最大值就是255. 当同时出现256个class, 势必会越过其边缘,溢出到id区域。
总结:
比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数 ,至于各级别的优先级,大家应该已经很清楚了,就是:
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承
这也就解释了为什么11个标签的定义会比不上1个类的定义,1个类加11个标签会比不上2个类的权重高。
选择器种类
查阅资料归纳下大概有如下几种:
通配选择器
类型选择器
ID选择器
类选择器
包含选择器
子元素选择器
相邻兄弟选择器
属性选择器
css1-css3提供非常丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到
关于CSS的执行效率:
Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序:
1.id 选择器(#myid)2.类选择器 (.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul < li)6.后代选择器(li a)7.通配符选择器(*)8.属性选择器(a[rel="external"])9.伪类选择器(a:hover,li:nth-child)
上面九种选择器中ID选择器的效率是最高,而伪类选择器的效率则是最低、
详细的介绍大家还可以点击Writing efficient CSS selectors。