CSS选择器和样式[补充]

---

一、更多选择器

1、更多伪类选择器

1. first-child
   选中第一个子元素
   first-of-type:选中的是子元素中第一个指定类型的元素

2. last-child

3. nth-child（n）
   选中指定的第几个子元素
   even:关键字，等同于2n
   odd:关键字，等同于2n+1

4. nth-of-type
   选中的指定的子元素中第几个某类型的元素

2、更多的伪类元素选择器

1. first-letter
   选中元素中第一个字母

2. first-line
   选中元素中第一行的文字

3. selection
   选中被用户可选的文字

二、更多样式

1、透明度

1. opacity：设置的是整个元素的透明度，它的取值范围是0~1(不常用)
2. 在颜色位置设置alpha通道（rgba）

2、鼠标

使用cursor设置

3、盒子隐藏

1. display:none,不生成盒子
2. visibility：hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间

4、背景图

1）和img元素的区别

img元素属于HTML的概念
背景图属于css概念

1. 当图片属于网页内容时，必须使用img元素
2. 当图片仅用于美化页面时，必须使用背景图

2）涉及的css属性

1. background-image

2. background-repeat
   默认情况下，背景图会在横坐标和纵坐标中进行重复

3. background-size
   预设值：contain，cover，类似于object-fit
   数值或百分比

/* background-size:100% 100%; */
background-size:300px 400px;
1
2
3

3. background-position
   设计背景图的位置
   预设值：left bottom right top center

background-position:center bottom;

1
2

数值或百分比：相对位置

雪碧图（精灵图spirit）
5. background-attachment
通常用它控制背景图是否固定

6. 背景图和背景颜色混用

7. 速写（简写）background

body{
    background:url("imgs/main_bg.jpg")no-repeat center/100% #000;
}
1
2
3