day09 css选择器

css选择器

css选择器分为5种
一、核心选择器

1.便签选择器

2.id选择器，给标签加一个id名并且为它赋值属性（通常不用于css中，id用于js，class用于css）

3.class 选择器 ，给标签加类名。

4.逗号选择器，同时给两个标签修饰相同的属性。

5.组合选择器，配合id和class为一个标签命名使用

6.普遍选择器（较少使用，一般定义通用样式例如去掉边框，内边距…）

二、层次选择器

1.后代选择器，选择这个子元素之后的所有子元素

选择nav后的所有li
2.子元素选择器，选择之后直接的一个子元素（最多写五层）
表示ul的子元素li的子元素的ul

3.下一个兄弟选择器 ~/所有兄弟选择器 +

四、伪类选择器
1.与状态相关
：link 还没有被访问的状态 和a标签配合使用
：hover 光标悬浮到元素改变状态 （常用，与过渡和变形配合使用）
：active a标签被激活
：visited a标签被访问过
2.与子元素相关
：first-child 第一个孩子
：last-child 最后一个孩子
：nth-child（函数/数字/关键字）evev为偶数
：first-of-type 表示一组兄弟元素中其类型的第一个元素
：last-of-type 表示一组兄弟元素中其类型的最后一个元素
：nth-of-type（函数/数字/关键字）

四、伪元素选择器（产生一个虚拟元素）

：：after 被选元素后面插入内容（用于清除float浮动）
：：before 被选元素前面插入内容
：：selection 被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）
：：first-line 选择第一行
：：first-letter 选择首字母
副作用：在dom中产生一个节点
五、属性选择器/属性过滤器（用于表单元素中）
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用

对于已经选择的进行过滤input
【type=text】
【type^=text】
【typr*=text】
【type$=text】

css规则

分为四部分
字体样式、文本样式（可继承）
列表样式、盒子样式

应用
1、将css规则嵌入到元素的属性中。（样式杂糅、优先级高）
2、将css嵌入到head《style》标签中
3、将css规则定义在外部css文件，通过link导入

宽度一般加给父元素，高度加给子元素