系统学习CSS-第二天

复合选择器

作用：更准确更高效地选择目标元素
分类：后代、子代、并集、伪类

后代选择器（重要）
作用：可以选择父元素里面的任意子元素
语法：元素1 元素2 {样式声明；}
应注意：

1. 元素1和元素2之间用空格隔开
2. 最终选择的是子元素
3. 只要是后代都能选，子孙都能
4. 元素1和元素2可以是任意的选择器
5. 为代码优化，嵌套尽量不超过4层

子元素选择器
作用：选择亲儿子，即只选择最近一级子元素
语法：元素1>元素2 {样式声明；}
应注意：

1. 元素1与元素2之间用大于号隔开
2. 只能选亲儿子
3. 最终选的也是孩子，不是父级元素

并集选择器（常用）
作用：可以选择多组标签，集体声明
语法：元素1，元素2，元素3... {样式声明；}
应注意：

1. 之间用逗号隔开
2. 逗号是“和”的意思
3. 任何形式的选择器都可以作为并集选择器
4. 并集选择器喜欢竖着写
5. 最后一个选择器不加逗号，表示结束

链接伪类选择器（常用）
使用：像选择器添加特殊效果
关键词：link,visited,hover,active(LVHA 都写时，顺序不能更改)
常用于：
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 当鼠标悬浮其上时
a:active 鼠标正在按下还未弹起的链接
应注意：

1. 用冒号隔开
2. 冒号后面不用加空格
3. 给a标签添加伪类时，顺序不可更改，否则无效

开发中案例：

.nav a {
	color: #333;
	text-decration: none;
}
.nav a:hover {
	color: skyblue;
	text-decration: underline;
}

补：表单获得焦点（光标）时的状态

input:focus {
    background-color: blue;
    width: 330px;
}

补：交集选择器，是“既…又…”的关系，之间没有空格

div.one {
    color: red;
}

CSS的元素显示模式

作用：元素以什么方式显示
分类：三个

1.块元素block
特点：

1. 自己独占一行
2. 宽高内外边距都可控制
3. 默认宽度是其父级元素宽度的100%
4. 是一个容器或盒子，里面可以放行内元素或块元素

2.行内元素inline
特点：

1. 可以一行显示多个
2. 直接设置宽高是无效的
3. 默认宽度是其内容本身的宽度、
4. 行内元素只能容纳文字或其他行内元素

3.行内块元素inline-block
特点：

1. 同时具有行内元素和块元素的特点
2. 相邻的元素在一行上，中间有一条空白的缝隙，一行显示多个
3. 可以设置宽度高度内外边距

模式的转换
应用场景：由于有时元素需要另一个模式的特性
使用：为该元素添加属性即可，写在属性的第一行
display: block;转换为块元素（常用）
display: inline;转换为行内元素
display: inline-block;转换为行内块元素（常用）

背景图片

应用场景：logo，装饰性小图，超大图
优点：便于控制位置
1.图片平铺属性

background-repeat: no-repeat;

2.背景位置：三种
方位名词background-position: left center;
注：上下左右中
精确单位background-position: 30px 50px;
注：第一个是X，表距离左侧距离；第二个是Y，表距离顶部距离
混合单位background-position: left 40px;
3.背景固定

background-attachment: fixed;

4.背景半透明

background-color: rgb(0,0,0,0.3);

背景属性复合写法

/* 写法：background：颜色 图地址 平铺 滚动 位置; */
background: pink url(./images/bg.jpg) no-repeat fixed center 40px;