CSS学习笔记——选择器的使用

CSS的使用

1、 作用：美化与布局界面

2、 引用语法：
A) 内部：在HTML页面内通过style标记设置，仅供当前页面内使用
B) 外部：单独定义一个样式表文件（以CSS作为后缀名）在HTML页面中用标记（href属性指定CSS文件路径，rel指定文件与页面的关系，或固定为stylesheet；或style标记添加@import指令引入，可以供多个页面使用）
C) 行内：在HTML页面内，通过style属性进行设置，仅供当前标签使用

3、 定义语法：
A) 内部、外部：
选择器{
样式名称1：样式值；
样式名称2：样式值；
}
B) 行内：样式名称1：样式值；
C) 注释：/注释内容/

4、 基础选择器
A) 标签元素：以标签名作为选择依据
B) 类：以标签的class属性值作为选择依据，前面加点（.）
C) id：以标签id属性值作为选择依据，前面加（#）
D) 类和id的命名要求：不允许数字和标点符号开头，不允许中文，一般用有意义的英文单词；id在一个页面中是唯一的，一个标签可以有多个class值（写在一个class属性中，用空格分隔）

5、 选择器的优先级：
A) 加载的顺序：标签 < 类< id < 行内；后加载的样式如果和之前加载的样式冲突，后加载的覆盖之前加载的。
B) 内部和外部：没有优先级的区别，先写的就先加载
C) important：优先级最高，使用时！important直接写在样式值后面

6、 扩展选择器
A) 复合：将标签选择器与类或id合在一起，必须都满足条件才能使用
B) 组合：通过逗号将多个相同样式规则的选择器组合在一起，只要满足其中一个即可
C) 嵌套：祖孙后代的关系使用空格，父子关系使用>，形如：
a b （找b，但b必须在a里面，不管级别）
a>b （找b，b不仅必须在a里面，还必须紧靠着a）
D) 超链接的伪类选择器：
a:link 普通的未被访问过的链接
a:visited 当a所链接的地址已经被访问过
a:hover 当鼠标移动到a标记上
a:active 当a标记获得焦点时
E) 伪元素选择器
1）:first-letter：第一个字符
2）:first-line：第一行
3）:before、:after：选择器所指定的标记内容的前面，后面，配合content属性增加内容（用于设置的新增文字）