首页 > Web开发 > 详细

《CSS mastery》读书笔记

时间：2014-06-07 03:52:50 阅读：301 评论：0 收藏：0 [点我收藏+]

标签：c style class a ext color

又翻了一下之前的读书笔记，再重温了忘掉的细节。最近一年的工作，由于有重构岗位的同学负责CSS的编写，虽说还是接触到，但毕竟不写好久了，有些东西还是忘记了，例如选择器的权重计算细节。这个笔记只是部分，后半部分快速浏览了，没写笔记。

1、元素命名规则

类名或者ID以元素是做什么的来命名，不要以元素的外观表现来命名。
类名或者ID全部小写，并用连字符号或许下划线分隔。（.add-class）

2、伪类

链接伪类： :link和:visited
动态为例： :hover :active :focus
- 设置:fouces与:hover相同的样式，让使用键盘来访问元素（更多时候是a标签）时，表现就跟用鼠标移到该元素上的效果相同
- 用途：
- - <a></a>使用:link,:visited,:hover,:active,:focus使链接的效果更丰富；:link指未访问<a>标签前
  - - 注意：<a>中使用伪类是，必须注意伪类套用样式的顺序，不然会导致后面的伪类覆盖了前面的伪类的情况
    - 顺序为：a:link,a:visited,a:hover,a:focus,a:active（记忆：LVHFA）
    - 习惯：LV一般一起设置，HFA一起设置
    - eg: a:link,a:visited{text-decoration:none;} a:hover,a:focus,a:active{text-decoration:underline;}
  - 表格行<tr></tr>中使用:hover伪类，悬停的该行整行变色
  - 提交按钮上使用:active
  - 输入框中使用:focus，使输入时获得丰富效果
注意：IE7及以下的版本不支持除链接外的其他元素上使用伪类选择器！

3、选择器

常用选择器：
- 类型（元素、简单）选择器
- ID选择器
- 类选择器
- 伪类
通用选择器： *(通配)
高级选择器：
- 子选择器、相邻同胞选择器
- - 子选择（IE7以上才支持）： #nav>li 选择#nav下的直接(第一个)li子元素，注意与通用选择器（#nav li）的区别
  - 注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择
  - 相邻同胞选择（定位位于同一个父元素下某个元素之后的一个元素）： h2+p 选择h2后面紧跟的一个p元素
- 属性选择器（IE6不支持）
- - eg: [id="header"]{ color:red;}（指拥有id=header属性的所有元素或者 div[title]{}（指选择有title属性的div元素）
伪元素选择器：
- first-letter、first-line、before、after
- eg: p :first-letter{color:red;} div:after{content:"a";}

4、层叠和特殊性

层叠：处理同一个元素可能有一个或多个样式规则，层叠给每个规则分配一个重要度。
特殊性：选择器的特殊决定规则的次序。
1. 规则是，给每种选择器分配一个数字值，然后将规则的每个选择器的值加起来，计算出该数值来，按照最高数值的规则来应用样式
2. style行内属性的规则特殊性总是高于其他选择器（因为其特殊性为1,0,0,0）
3. 两个规则的特殊性相同，后定义的规则优先
4. 选择器特殊性分为4个等级a,b,c,d（特殊性：a,b,c,d）
  1. style行内样式，a=1;
  2. b等于ID选择器的总数
  3. c等于类、伪类和属性选择器的数量
  4. d等于类型选择器和伪元素选择器的数量
    - eg: style="" 特殊性：1,0,0,0 如果基数是10，则特殊性是1000
    - eg: #wrapper #content 特殊性：0,2,0,0 如果基数为10，则特殊性是200
  5. 最终计算规则的特殊性时，基数默认不是指定为某个特定值的，如果选择器数量不多，可以指定基数就是为10来计算

5、继承

概念：应用样式的元素的后代会继承样式的某些属性。例如字号和颜色
注意和层叠区分开来
同时，继承而来的样式特殊性为空！直接应用于元素的样式总能覆盖继承而来的样式。

《CSS mastery》读书笔记,布布扣,bubuko.com

《CSS mastery》读书笔记

标签：c style class a ext color

原文地址：http://www.cnblogs.com/pidianpidian/p/3756069.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！