1+x 前端初级css（2）

通配选择器

语法：

<style>

*{}

</style>

将页面中所有标签都选中

使用场景：通常设置*{padding:0;margin:0;}

伪类选择器

---

元素:link 正常的链接的状态

元素:visited 点击以后的状态

元素:hover 当鼠标移动上去的状态-------重点、常用

元素:active 当鼠标按下去时候的状态

总结：

1.伪类是选择器，不是css的属性，不能写在{}中

2.visited和link不能适用于普通标签，只有a标签才有

3.hover和active是任何标签都可以有的

伪对象选择器

---

语法：

元素:first-letter 选择第一个字符

元素:first-line 选择第一行

总结：

1.这是选择器，不是css属性，不能写在{}中

2.所谓的元素，可以是标签名，还可以是类名.class名:first-letter/line{}

相邻元素选择器

---

哥哥+弟弟{} /*通过哥哥选择到弟弟 */

例：

<style>

div+p{/* 兄弟选择器，哥哥标签+弟弟标签，，，，修饰的是弟弟 */

color:red;

}

</style>

<div>第一个盒子</div>

<p>第一个段落</p>

<p>第二个段落</p>

<span>无用的标签</span>

<p>第三个段落</p>

总结：

1.哥哥和弟弟中间用的符号：+

2.修饰的是弟弟标签

3.不能通过弟弟选哥哥

关系选择器：后代(空格)，子元素(大于号)，兄弟(加号)

属性选择器

---

[属性名]

语法：

[属性名]{}

[属性名=属性值]

语法：

[属性名=属性值]{}

[属性名~=属性值]（选择多个值中的一个）

语法：

[属性名~=属性值]{}

[属性名|=属性值]（选择连字符值中的第一个单词）

语法：

[属性名|=属性值]{}

[属性名*=属性值]（选择包含当前值的元素）

语法：

[属性名*=属性值]{}

总结：

重点[属性名] 和[属性名=属性值]

行高属性

---

语法：

line-height:数字px;

代表的一行的高度，放在段落中，可以理解为是行距

总结：

1.文字在行高中是垂直居中的

2.行高通常用于让文字在盒子中垂直居中

背景属性

---

a) 背景颜色

语法：background-color:颜色值

b) 背景图片

语法：background-image:url(图片路径)

c) 设置背景图片是否平铺

语法：background-rep