css就是一种先选择html元素，然后设定选中元素css属性的机制。
css选择符合要应用的样式构成一条css规则。

为文档添加样式的3种方法：

1.行内样式，直接写在特定标签的style属性中；
2.嵌入样式，在head元素中嵌入<style type="text/css"></style>，将css规则放入<style>和</style>中；
3.链接样式，在<head>元素中使用外部的样式表，如：
<link href="1.css" rel="stylesheet" type="text/css" />

3种css样式的优先级：
行内样式 > 嵌入样式 > 链接样式

css规则命名惯例：

css规则由选择符和声明2部分组成。选择符用于指定元素，声明又由2部分组成：属性和值。如果选择符由多个元素组成，则用逗号隔开。如果有多条声明，则用分号隔开。简单例子：
p,h1 {
    color:red;
    font-size:12px;
}

用于选择特定元素的选择符分为3种：
1.上下文选择符。基于祖先或同胞元素选择一个元素：
a.祖先选择符。用空格符隔开，用于选定某个祖先元素下的元素。如我们需要只改变<aside>元素中的<p>元素：
aside p {
    color:green;
}
b.子选择符。标签2必须是标签1的子元素：
标签1 > 标签2
c.临近同胞选择符。标签2必须紧跟在其同胞标签1的后面：
标签1 + 标签2
d.一般同胞选择符。标签2必须跟（不一定紧跟）在其同胞标签1后面：
标签1 ~ 标签2
e.通用选择符。*是一个通配符，可以匹配任何元素。

2.ID和类选择符。只要在html中为元素添加了id和class属性，就可以在css选择符中使用ID和类名，直接选中特定区域。ID和class有点不同，ID用来在页面中唯一地标识一个元素，类用来标识一组具有某些相同特征的元素。
a.类选择符：
.类名
b.ID选择符：
#id属性值

3.属性选择符。通过元素的属性来定位元素。
a.属性名选择符。选择带有该属性名的标签名：
标签名[属性名]
b.属性值选择符。选择带有值为属性值的属性名的标签名。
标签名[属性名="属性值"]

伪类：
伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标签上。伪类有2种：
UI伪类（在html元素处于某种状态，如鼠标悬停时，为该元素应用CSS样式）；
结构化伪类（标记中存在某种结构上的关系时，如某个元素是一组元素中的第一个或最后一个，为相应元素应用CSS样式）。

UI伪类：
1.链接伪类：
a:link（默认状态）
a:visited（用户此前点击过的链接）
a:hover（鼠标悬停）
a:active（链接正在被点击，鼠标还没有释放）
2.focus伪类：
input:focus（获得焦点）
3.target伪类：
如果用户点击一个指向页面中其他元素的链接，则那个元素就是target，可以用:target伪类选中它：
#cankao:target

结构化伪类：
1.:first-child和:last-child（第一个和最后一个子元素）
2.:nth-child(n) （第n个子元素）

伪元素：
伪元素就是文档中若有实无的元素。
1.::first-letter（首字符）
2.::first-line（首行）
3.::before和::after（可用于在特定元素前面或后面添加特殊文字内容），如：
<p class="age">25</p>
p.age::before {content:"我的年龄是："}
最后浏览器显示出的内容是：
我的年龄是：25

css应用机制：
1.继承：
css中的元素会继承其祖先元素的css样式。
2.特指：
特指度表示一条规则有多明确。一条规则的特指度，由它的选择符中包含多少个标签、类名和ID决定。计算方式：
计算I(id)-C(class)-E(element)3个值，组成一个3位数，数值大的胜出。也就是说，id的权重大于class大于元素。
3.层叠：
层叠就是层叠样式表中的层叠，它是css的核心机制：
a.包含id的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符（详见特指度的计算）；
b.如果几个不同来源都为同一个标签同一个属性定义了样式，行内样式胜过嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。
规则a胜过规则b。也就是说，如果选择符的特指度更高，就算是后声明的，也会胜出。
c.设定的样式胜过继承的样式，此时不用考虑特定度。

个人对css应用机制的理解：
a.继承得到的永远最小，不考虑特指度；
b.后设定的大于先设定的；
c.在所有设定的css中，特指度完爆一切，优先级最高。

css读书笔记2：css工作原理的更多相关文章

  1. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  2. 读书笔记-NIO的工作方式

    读书笔记-NIO的工作方式 1.BIO是阻塞IO,一旦阻塞线程将失去对CPU的使用权,当前的网络IO有一些解决办法:1)一个客户端对应一个处理线程:2)采用线程池.但也会出问题. 2.NIO的关键类C ...

  3. 一篇笔记整理JVM工作原理

    首先要了解的 >>数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型. 基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变量保存引用值.“引用值”代表了 ...

  4. CSS学习笔记01 CSS简介

    1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...

  5. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  6. Android学习笔记View的工作原理

    自定义View,也可以称为自定义控件,通过自定义View可以使得控件实现各种定制的效果. 实现自定义View,需要掌握View的底层工作原理,比如View的测量过程.布局流程以及绘制流程,除此之外,还 ...

  7. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  8. DIV+CSS学习笔记（CSS）

    css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...

  9. 读书笔记《CSS权威指南》

    阅读本书主要目的: 自从学会CSS以来,虽然熟练掌握了其使用方法和技巧,但对其底层的原理和实现并不清晰,阅读本书想进一步系统化的学习和深入研究其本质,对这门前端基础语言从熟练使用到真正理解. 第1章 ...

随机推荐

  1. C语言中的结构体，结构体数组

    C语言中的结构体是一个小难点,下面我们详细来讲一下:至于什么是结构体,结构体为什么会产生,我就不说了,原因很简单,但是要注意到是结构体也是连续存储的,但要注意的是结构体里面类型各异,所以必然会产生内存 ...

  2. VC++ 监控指定目录改变

    转载:http://www.cnblogs.com/doublesnke/archive/2011/08/16/2141374.html VC++实施文件监控:实例和详解 相关帮助: http://h ...

  3. Python3基础 逻辑与 and

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  4. Luence学习笔记

    1.Luence的核心索引类 IndexWriter:建立索引的核心组件 Directory:代表一个lucene索引项的位置,是一个抽象类其子类有FSDirectory和RAMDirectory F ...

  5. JS常用的腳本庫--包括在線編輯器

    原文链接 一.基本库 1.jQuery a.简介 JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, F ...

  6. EI表达式和JSTL

    JSP九大内置对象     WEB域内置对象(存值取值,传值数据用的)    setAttribute/getAttribute;    page  基本不用/ pageContext 只在本页面有效 ...

  7. 通过EasyUI Tree说明SQL GUID和自增列ID的使用场景

    最新在开发中用到了EasyUI里面的Tree,通过API可以看到这个Tree的数据格式如下: 其中ID比较重要,API也说了,最开始我考虑到GUID比自增ID多占用了一些空间,所以采用的自增ID,测试 ...

  8. POJ 3617 Best Cow Line（最佳奶牛队伍）

    POJ 3617 Best Cow Line Time Limit: 1000MS Memory Limit: 65536K [Description] [题目描述] FJ is about to t ...

  9. ARC 下处理内存暴涨的一个解决办法

    有一种情况: ; i < ; i++) { NSString *s = @"ABC"; s = [s lowercaseString]; s = [s stringByApp ...

  10. Windows Internals学习笔记（二）系统架构

    参考资料: 1. <Windows Internals> 2. http://bestcbooks.com 3. Windows Drive Kit 4. Microsoft Window ...