陶吉诃德

这是最好的时代,这是最坏的时代;这是智慧的年代,这是愚蠢的年代;这是信仰的时期,这是怀疑的时期;这是光明的季节,这是黑暗的季节;这是希望之春,这是绝望之冬;

Tao-Quixote's Blog

css权威指南(一)

1、候选样式表

<head>
<link rel="stylesheet" href="xx.css" title="default" media="all">
<link rel="alternate" href="b.css" title="Big Text">
<link rel="alternate" href="bc.css" title="Beautiful Color">
</head>

如果浏览器允许用户选择样式表,则title会生成给用户的提示,然后浏览器会根据用户选择的样式表渲染页面。注:候选样式表带rel需要设置为alternate,浏览器默认使用rel=“stylesheet”的样式表渲染页面。

如果每个link标签的rel都设置为stylesheet并且都设置了title属性,则浏览器会从所有的link中选择一个下载并应用到页面中,并且应用哪个样式表是不确定的。如果没有设置title属性,则会下载所有的样式表,并根据级联的规则渲染页面。

2、style标签

style标签兼容老的浏览器:很老的浏览器可能并不认识style标签,所以浏览器不会解析style标签,但是style标签及其中的内容对于浏览器来说很像文本,即text,所以如果浏览器不认识style标签,那么很可能发生的一件事情就是style及其中的css样式代码都被呈现在了页面中。

解决方法:将style标签中的样式放在html注释中

<style><!--
h1: {color: red;}
--></style>

这样老旧的浏览器不认识style标签就会完全忽略style标记,并且会忽略css声明,因为css声明包含在html注释中,所以不会显示。

3、伪类

静态伪类::link, :visited 动态伪类::active, :hover, :focus

4、选择器的特殊性

内联:id:class:标签 ==》 1 : 1 : 1 : 1,即每个选择给对应位置的特殊性贡献1

  • 0:0:1:0 > 0:0:0:11
  • 属性选择的特殊性与类选择器的特殊性相等
h1#id	==> 0:1:0:1
h1[id="id"]	==> 0:0:1:1

注:!important秒杀一切特殊性。

注:继承没有任何特殊性,而通配符*具有0特殊性,0特殊性 > 没有特殊性。

<head>
<style>
* {
	color: red;
}
body {
	color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>

p标签的color继承自body,而*(通配)的特殊性为0,所以p标签的字体颜色为red(红色)。