css_day2

一、后代选择器（重要）

1.选择器—只控制到我们想控制的，别的不影响到
2.后代选择器
1.选择器名之间用空格隔开
2.后面的选择器名是前面的后代
3.最终效果作用在最后一个元素上
4.后代选择器中间的辈分可以省略，写3-5个层次即可
3. .father .son .sun{
color: red;
}
翻译：先找到father的元素，在找到里面的son，最好找到里面的sun
从外找到内
4.工作项目中，百分之九十九的选择器都是后代选择器
5.后代：必须是标签嵌套

子代选择器

		1.选择器名之间的连接符号是	>
        2.后面的选择器名是前面的子代
        3.最终效果作用在最后一个选择器名身上
        4.子代选择器中间的辈分不能省略

交集选择器

1.交集选择器没有任何连接符号
2.只会找到一个元素，拥有所有条件
.father.son.sun{
color: red;
}
翻译：找到一个元素，这个元素同时拥有三个类名：father son sun————缺一不可 ，多多益善

注：项目一拿到手，不用考虑其他的，直接用后代选择器
当后代选择器没办法精确控制到目标元素的时候，可以配合其他选择器

并集选择器

通配符选择器 *{
color：red；
}
因为性能浪费，所以工作中不用
并集选择器可以顶替我们通配符选择器
并集选择器选择器名之间用逗号隔开————————一个条件单独一行
只要满足任意一个条件就可以被控制

a标签的四个伪类选择器

a:link 未被访问过的a标签样式；浏览器没有访问记录
a:visited 访问过后的a标签样式；浏览器有访问记录
a:hover 当鼠标悬停的时候的样式
a:active 当鼠标点击不松手的那一瞬间的样式
注意：如果一个a标签同时拥有四个伪类选择器，有顺序要求：爱恨原则：love hate（先写link再写visited再写hover再写active）

标签的显示模式

块级元素————1.独自占据一行
2.可以设置宽高
3.如果块级元素没有设置宽度，那么宽度会等于父盒子
4.如果高度也没写，那就什么也没有
5.常见的块级元素：div p h1-h6 table ul li …
行内元素————1.不能个设置宽高————宽高由内容决定
2.一行可以显示多个
3.常见的行内元素： span a strong del ins em i
行内块元素———1.可以设置宽高
2.一行可以显示多个
3.行内块元素就是把块级与行内的优点做结合
4.常见的行内元素：input img
标签模式转换：块级————block
行内————inline
行内块————inline-block
因为span是行内元素，没有办法设置宽高
需求1：我希望span可以设置宽高，一行显示多个————行内块
display: inline-block;
需求2：我希望span可以设置宽高，但是独自占据一行————块级
display: block;

命名规则

类名命名规则
1.纯数字不行
2.以数字开头不行
3.字母可以
4.单词可以
5.中文不允许用